Cours IT Bases CSS 020_Sélecteurs

Sélecteurs

Les sélecteurs sont utilisés pour sélectionner les éléments du document qui doivent être stylisés. À travers différents modes de sélection, ils indiquent au navigateur quels éléments reçoivent quels styles.

Sélecteur ID (#)

Sélectionne un élément par son ID unique. Le sélecteur ID doit être unique dans le document et ne doit pas être réutilisé.

Exemple :

1
#myID {
2
  /* Règles de style */
3
}

Sélecteur de classe (.)

Sélectionne les éléments par leur nom de classe. Les sélecteurs de classe peuvent être utilisés pour plusieurs éléments, et un même élément peut avoir plusieurs classes.

Exemple :

1
.myClass {
2
  /* Règles de style */
3
}

Sélecteur d’élément (p, h1)

Sélectionne les éléments par leur nom d’élément HTML. Le sélecteur d’élément sélectionne tous les éléments correspondants dans le document.

Exemple :

1
p {
2
  /* Règles de style */
3
}

Sélecteur universel (*)

Sélectionne tous les éléments du document. À utiliser avec prudence car il correspond à tous les éléments et peut affecter les performances.

Exemple :

1
* {
2
  /* Règles de style */
3
}

Sélecteur d’attribut ([type="text"])

Sélectionne les éléments par leurs valeurs d’attribut. Les sélecteurs d’attribut peuvent sélectionner des éléments en fonction de différentes valeurs d’attribut.

Exemple :

1
input[type="text"] {
2
  /* Règles de style */
3
}

Sélecteur de pseudo-classe

Sélectionne des états ou positions spéciaux des éléments, comme le survol, la visite, etc.

Exemple :

1
a:hover {
2
  /* Règles de style */
3
}

Sélecteur de pseudo-élément

Sélectionne des parties spéciales des éléments, comme la première ligne, la première lettre, etc.

Exemple :

1
p::first-line {
2
  /* Règles de style */
3
}

Sélecteur d’enfant

Sélectionne les éléments enfants directs d’un élément. Ne sélectionne que les enfants directs, pas les descendants.

Exemple :

1
ul > li {
2
  /* Règles de style */
3
}

Sélecteur général de frères

Sélectionne tous les éléments frères ayant le même parent. Sélectionne tous les éléments frères après l’élément spécifié, sans exiger l’adjacence.

Exemple :

1
h2 ~ p {
2
  /* Règles de style */
3
}

Sélecteur de frère adjacent

Sélectionne l’élément frère immédiatement après l’élément spécifié.

Exemple :

1
h2 + p {
2
  /* Règles de style */
3
}

Sélecteur de descendants

Sélectionne tous les éléments descendants sous un élément, y compris les éléments profondément imbriqués.

Exemple :

1
div p {
2
  /* Règles de style */
3
}

Sélecteur d’union (,)

Combine plusieurs sélecteurs pour sélectionner tous les éléments correspondant à l’un d’entre eux. Utilisé pour sélectionner simultanément plusieurs types d’éléments et appliquer les mêmes règles de style.

Exemple :

1
h1, h2, h3 {
2
  /* Règles de style */
3
}

Liste de sélecteurs

Énumère plusieurs sélecteurs par ordre de priorité pour sélectionner le plus approprié.

Exemple :

1
div p,
2
.myClass,
3
#myID {
4
  /* Règles de style */
5
}

Règles de nommage des sélecteurs

• Les noms de sélecteurs doivent être composés de lettres, chiffres, underscores ou tirets.

• Les noms doivent commencer par une lettre ou un underscore.

• Les noms ne peuvent pas commencer par un chiffre.

• Les noms ne peuvent pas contenir d’espaces.

  Recommandations :

• Utilisez des noms significatifs : Les noms de sélecteurs doivent refléter clairement la fonction ou le but de l’élément sélectionné.

• Suivez les conventions de nommage : Utilisez des conventions cohérentes comme camelCase ou kebab-case pour améliorer la cohérence du code.

• Évitez les abréviations sans sens : Évitez les abréviations trop courtes ou insignifiantes pour que les autres développeurs puissent comprendre.

• Suivez la sémantique : Utilisez des sélecteurs sémantiques pour améliorer la lisibilité et la maintenabilité du code.