CSS
Sélecteurs

Introduction

Syntaxe

• # id
• . nom du cours
• : pseudo-classname
• :: pseudo-elementname
• [ attr ] / * possède l'attribut attr . * /
• [ attr = " value "] / * possède l'attribut attr et sa valeur est exactement " value ". * /
• [ attr ~ = " value "] / * possède l'attribut attr et sa valeur, lorsqu'elle est divisée sur des espaces , contient " value ". * /
• [ attr | = " value "] / * possède l'attribut attr et sa valeur est exactement " value " ou sa valeur commence par " value - ". * /
• [ attr ^ = " value "] / * possède l'attribut attr et sa valeur commence par " value ". * /
• [ attr $ = " value "] / * possède l'attribut attr et sa valeur se termine par " value ". * /
• [ attr * = " value "] / * possède l'attribut attr et sa valeur contient " value ". * /
• nom de l'élément
• *

Remarques

Sélecteurs d'attribut

Vue d'ensemble

Les sélecteurs d'attribut peuvent être utilisés avec différents types d'opérateurs qui modifient les critères de sélection en conséquence. Ils sélectionnent un élément en utilisant la présence d'un attribut ou d'une valeur d'attribut donné.

Remarques:

1. La valeur de l'attribut peut être entourée de guillemets simples ou de guillemets doubles. Aucune citation ne peut également fonctionner, mais elle n'est pas valide selon le standard CSS et elle est déconseillée.

2. Il n'y a pas de spécification CSS4 unique et intégrée, car elle est divisée en modules distincts. Cependant, il existe des modules de "niveau 4". Voir le support du navigateur .

Détails

[attribute]

Sélectionne des éléments avec l'attribut donné.

div[data-color] {
  color: red;
}

<div data-color="red">This will be red</div>
<div data-color="green">This will be red</div>
<div data-background="red">This will NOT be red</div>

Démo en direct sur JSBin

[attribute="value"]

Sélectionne des éléments avec l'attribut et la valeur donnés.

div[data-color="red"] {
  color: red;
}

<div data-color="red">This will be red</div>
<div data-color="green">This will NOT be red</div>
<div data-color="blue">This will NOT be red</div>

Démo en direct sur JSBin

[attribute*="value"]

Sélectionne des éléments avec l'attribut et la valeur donnés où l'attribut donné contient la valeur donnée n'importe où (sous la forme d'une sous-chaîne).

[class*="foo"] {
  color: red;
}

<div class="foo-123">This will be red</div>
<div class="foo123">This will be red</div>
<div class="bar123foo">This will be red</div>
<div class="barfooo123">This will be red</div>
<div class="barfo0">This will NOT be red</div>

Démo en direct sur JSBin

[attribute~="value"]

Sélectionne des éléments avec l'attribut et la valeur donnés où la valeur donnée apparaît dans une liste séparée par des espaces.

[class~="color-red"] {
  color: red;
}

<div class="color-red foo-bar the-div">This will be red</div>
<div class="color-blue foo-bar the-div">This will NOT be red</div>

Démo en direct sur JSBin

[attribute^="value"]

Sélectionne des éléments avec l'attribut et la valeur donnés où l'attribut donné commence par la valeur.

[class^="foo-"] {
  color: red;
}

<div class="foo-123">This will be red</div>
<div class="foo-234">This will be red</div>
<div class="bar-123">This will NOT be red</div>

Démo en direct sur JSBin

[attribute$="value"]

Sélectionne des éléments avec l'attribut et la valeur donnés où l'attribut donné se termine par la valeur donnée.

[class$="file"] {
  color: red;
}

<div class="foobar-file">This will be red</div>
<div class="foobar-file">This will be red</div>
<div class="foobar-input">This will NOT be red</div>

Démo en direct sur JSBin

[attribute|="value"]

Sélectionne des éléments avec un attribut et une valeur donnés où la valeur de l'attribut correspond exactement à la valeur donnée ou correspond exactement à la valeur donnée suivie de - (U + 002D)

[lang|="EN"] {
  color: red;
}

<div lang="EN-us">This will be red</div>
<div lang="EN-gb">This will be red</div>
<div lang="PT-pt">This will NOT be red</div>

Démo en direct sur JSBin

[attribute="value" i]

Sélectionne des éléments avec un attribut et une valeur donnés, où la valeur de l'attribut peut être représentée par Value , VALUE , vAlUe ou toute autre possibilité insensible à la casse.

[lang="EN" i] {
  color: red;
}

<div lang="EN">This will be red</div>
<div lang="en">This will be red</div>
<div lang="PT">This will NOT be red</div>

Démo en direct sur JSBin

Spécificité des sélecteurs d'attribut

0-1-0

Identique au sélecteur de classe et à la pseudo-classe.

*[type=checkbox] // 0-1-0

Notez que cela signifie qu'un sélecteur d'attribut peut être utilisé pour sélectionner un élément par son ID à un niveau de spécificité inférieur à celui s'il était sélectionné avec un sélecteur d'ID : [id="my-ID"] cible le même élément que #my-ID mais avec une spécificité inférieure.

Voir la section Syntaxe pour plus de détails.

Combinateurs

Vue d'ensemble

Remarque: Les sélecteurs frères et sœurs ciblent les éléments qui les suivent dans le document source. CSS, de par sa nature (il cascade), ne peut pas cibler les éléments précédents ou parents . Cependant, en utilisant la propriété flex order , un sélecteur précédent peut être simulé sur un support visuel .

Combinateur descendant: selector selector

Un combinateur descendant, représenté par au moins un caractère d'espace ( ), sélectionne les éléments descendants de l’élément défini. Ce combinateur sélectionne tous les descendants de l'élément (des éléments enfants dessus).

div p {
  color:red;
}

<div>
  <p>My text is red</p>
  <section>
    <p>My text is red</p>
  </section>
</div>

<p>My text is not red</p>

Démo en direct sur JSBin

Dans l'exemple ci-dessus, les deux premiers éléments <p> sont sélectionnés car ils sont tous deux des descendants de <div> .

Combinateur d'enfants: selector > selector

Le combinateur enfant ( > ) est utilisé pour sélectionner des éléments qui sont des enfants ou des descendants directs de l'élément spécifié.

div > p {
  color:red;
}

<div>
  <p>My text is red</p>
  <section>
    <p>My text is not red</p>
  </section>
</div>

Démo en direct sur JSBin

Le CSS ci-dessus sélectionne uniquement le premier élément <p> , car c'est le seul paragraphe directement issu d'un <div> .

Le deuxième élément <p> n'est pas sélectionné car il ne s'agit pas d'un enfant direct de <div> .

Combinateur fraternel adjacent: selector + selector

Le combinateur frère ( + ) adjacent sélectionne un élément frère qui suit immédiatement un élément spécifié.

p + p {
  color:red;
}

<p>My text is not red</p>
<p>My text is red</p>
<p>My text is red</p>
<hr>
<p>My text is not red</p>

Démo en direct sur JSBin

L'exemple ci-dessus sélectionne uniquement les éléments <p> qui sont directement précédés par un autre élément <p> .

Combinateur général de frères et sœurs: selector ~ selector

Le combinateur général de frères et sœurs ( ~ ) sélectionne tous les frères qui suivent l’élément spécifié.

p ~ p {
  color:red;
}

<p>My text is not red</p>
<p>My text is red</p>
<hr>
<h1>And now a title</h1>
<p>My text is red</p>

Démo en direct sur JSBin

L'exemple ci-dessus sélectionne tous les éléments <p> précédés d'un autre élément <p> , qu'ils soient ou non immédiatement adjacents.

Sélecteurs de nom de classe

Le sélecteur de nom de classe sélectionne tous les éléments avec le nom de la classe ciblée. Par exemple, le nom de classe .warning sélectionnera l'élément <div> :

<div class="warning">
    <p>This would be some warning copy.</p>
</div>

Vous pouvez également combiner des noms de classe pour cibler des éléments plus spécifiquement. Prenons l'exemple ci-dessus pour présenter une sélection de classes plus compliquée.

CSS

.important {
    color: orange;
}
.warning {
    color: blue;
}
.warning.important {
    color: red;
}

HTML

<div class="warning">
    <p>This would be some warning copy.</p>
</div>

<div class="important warning">
    <p class="important">This is some really important warning copy.</p>
</div>

Dans cet exemple, tous les éléments de la .warning classe auront une couleur de texte en bleu, des éléments avec la .important classe ont une couleur de texte orange, et tous les éléments qui ont à la fois le .important et .warning nom de la classe auront un texte rouge Couleur.

Notez que dans la CSS, la déclaration .warning.important ne comportait aucun espace entre les deux noms de classe. Cela signifie qu'il ne trouvera des éléments qui contiennent les noms de classe warning et important dans leur class attribut. Ces noms de classe peuvent être dans n'importe quel ordre sur l'élément.

Si un espace était inclus entre les deux classes dans la déclaration CSS, il ne sélectionnerait que les éléments ayant des éléments parents avec un .warning classe .warning et des éléments enfants avec des noms de classe .important .

Sélecteurs d'ID

Les sélecteurs d'ID sélectionnent les éléments DOM avec l'ID ciblé. Pour sélectionner un élément par un identifiant spécifique en CSS, le préfixe # est utilisé.

Par exemple, l'élément div suivant HTML…

<div id="exampleID">
    <p>Example</p>
</div>

… Peut être sélectionné par #exampleID en CSS comme indiqué ci-dessous:

#exampleID {
    width: 20px;
}

Remarque : les spécifications HTML n'autorisent pas plusieurs éléments avec le même ID

Les pseudo-classes

Les pseudo-classes sont des mots - clés qui permettent une sélection basée sur des informations situées en dehors de l'arbre des documents ou qui ne peuvent pas être exprimées par d'autres sélecteurs ou combinateurs. Ces informations peuvent être associées à un certain état (pseudo-classes d' état et dynamiques ), à des emplacements (pseudo-classes structurelles et cibles ), à des négations de la première (pseudo-classe de négation ) ou à des langages (pseudo-classe lang ). Les exemples incluent si oui ou non un lien a été suivi ( :visited ), la souris survole un élément ( :hover ), une case à cocher est cochée ( :checked ), etc.

Syntaxe

selector:pseudo-class { 
    property: value;
}

Liste des pseudo-classes:

La pseudo-classe :visited Visitée ne peut plus être utilisée pour la plupart des styles de navigateurs modernes, car il s'agit d'une faille de sécurité. Voir ce lien pour référence.

Sélecteurs de base

Remarque: la valeur d'un ID doit être unique dans une page Web. Utiliser la valeur d'un ID plus d'une fois dans le même arbre de document constitue une violation du standard HTML .

Une liste complète des sélecteurs se trouve dans la spécification CSS Selectors Level 3 .

Comment styler une entrée de plage

HTML

<input type="range"></input>

CSS

Valeur booléenne globale avec case à cocher: cochée et ~ (combinateur frère général)

Avec le sélecteur ~, vous pouvez facilement implémenter un booléen accessible global sans utiliser JavaScript.

Ajouter une valeur booléenne comme case à cocher

Au tout début de votre document, ajoutez autant de booléens que vous voulez avec un id unique et le jeu d'attributs hidden :

<input type="checkbox" id="sidebarShown" hidden />
<input type="checkbox" id="darkThemeUsed" hidden />

<!-- here begins actual content, for example: -->
<div id="container">
    <div id="sidebar">
        <!-- Menu, Search, ... -->
    </div>

    <!-- Some more content ... -->
</div>

<div id="footer">
    <!-- ... -->
</div>

Changer la valeur du booléen

Vous pouvez basculer le booléen en ajoutant une label avec l'attribut for :

<label for="sidebarShown">Show/Hide the sidebar!</label>

Accéder à la valeur booléenne avec CSS

Le sélecteur normal (comme .color-red ) spécifie les propriétés par défaut. Ils peuvent être remplacés en suivant les sélecteurs true / false :

/* true: */
<checkbox>:checked ~ [sibling of checkbox & parent of target] <target>

/* false: */
<checkbox>:not(:checked) ~ [sibling of checkbox & parent of target] <target>

Notez que <checkbox> , [sibling ...] et <target> doivent être remplacés par les sélecteurs appropriés. [sibling ...] peut être un sélecteur spécifique (souvent si vous êtes paresseux) simplement * ou rien si la cible est déjà un frère de la case à cocher.

Des exemples pour la structure HTML ci-dessus seraient:

#sidebarShown:checked ~ #container #sidebar {
    margin-left: 300px;
}

#darkThemeUsed:checked ~ #container,
#darkThemeUsed:checked ~ #footer {
    background: #333;
}

En action

Voir ce violon pour une implémentation de ces booléens globaux.

CSS3: exemple de sélecteur in-range

<style>
input:in-range {
    border: 1px solid blue;
}
</style>



<input type="number" min="10" max="20" value="15">
<p>The border for this value will be blue</p>

La pseudo-classe CSS :in-range correspond lorsqu'un élément a son attribut value dans les limites de plage spécifiées pour cet élément. Cela permet à la page de donner un avis indiquant que la valeur actuellement définie à l'aide de l'élément est comprise dans les limites de la plage. [1]

Classe de pseudo enfant

"La pseudo-classe CSS nth-child (an + b) correspond à un élément qui contient un frère + + b-1 dans l'arbre de document, pour une valeur positive ou nulle donnée pour n" - MDN: nth-child

Sélectionner l'élément en utilisant son identifiant sans la haute spécificité du sélecteur d'identifiant

Cette astuce vous permet de sélectionner un élément utilisant l'ID comme valeur pour un sélecteur d'attribut afin d'éviter la grande spécificité du sélecteur d'ID.

HTML:

<div id="element">...</div>  

CSS

#element { ... } /* High specificity will override many selectors */

[id="element"] { ... } /* Low specificity, can be overridden easily */

A. L'exemple: non pseudo-classe & B.: pseudo-classe CSS focus-within

A. La syntaxe est présentée ci-dessus.

Le sélecteur suivant correspond à tous <input> éléments <input> d'un document HTML qui ne sont pas désactivés et n'ont pas la classe .example :

HTML:

<form>
    Phone: <input type="tel" class="example">
    E-mail: <input type="email" disabled="disabled">
    Password: <input type="password">
</form>

CSS:

input:not([disabled]):not(.example){
   background-color: #ccc;
}

La pseudo-classe :not() supportera également les sélecteurs séparés par des virgules dans les sélecteurs de niveau 4:

CSS:

input:not([disabled], .example){
   background-color: #ccc;
}

Démo en direct sur JSBin

Voir la syntaxe de fond ici .

B. La pseudo-classe CSS focus-within

HTML:

  <h3>Background is blue if the input is focused .</p>
  <div>
    <input type="text">
  </div>

CSS:

div {
  height: 80px;
}
input{
  margin:30px;
}
div:focus-within {
  background-color: #1565C0;
}

Exemple de sélecteur de pseudo-classe: only-child

La pseudo-classe CSS :only-child représente tout élément qui est le seul enfant de son parent.

HTML:

<div>
  <p>This paragraph is the only child of the div, it will have the color blue</p>
</div>

<div>
  <p>This paragraph is one of the two children of the div</p>
  <p>This paragraph is one of the two children of its parent</p>
</div>

CSS:

p:only-child {
  color: blue;
}

L'exemple ci-dessus sélectionne l'élément <p> qui est l'enfant unique de son parent, en l'occurrence un <div> .

Démo en direct sur JSBin

Le: sélecteur dernier type

Le :last-of-type sélectionne l'élément qui est le dernier enfant, d'un type particulier, de son parent. Dans l'exemple ci-dessous, le css sélectionne le dernier paragraphe et le dernier en-tête h1 .

p:last-of-type { 
  background: #C5CAE9; 
}
h1:last-of-type { 
  background: #CDDC39; 
}

<div class="container">
    <p>First paragraph</p>
    <p>Second paragraph</p>
    <p>Last paragraph</p>
    <h1>Heading 1</h1>
    <h2>First heading 2</h2>
    <h2>Last heading 2</h2>
</div>

jsfiddle