Sélecteurs CSS avancés

Sélecteurs CSS simples

• On sait sélectionner un élément
  • en fonction de son type
  • en fonction de sa classe
  • en fonction de son identifiant
• On sait aussi combiner des sélecteurs, pour sélectionner les éléments
  • qui correspondent à un sélecteur ou un autre (disjonction)
  • qui correspondent à un sélecteur et un autre (conjonction)
  • et surtout, qui sont des descendants d'un autre élément, ce qui permet d'exploiter la structure du HTML pour construire le CSS
• Avec ça, on peut déjà faire énormément de choses
• Cependant, pour faire des choses précises, on a souvent besoin d'ajouter des blocs (typiquement des div), ce qui n'est pas très propre (le HTML doit rester sémantique)
• Mais surtout on a souvent besoin d'utiliser beaucoup de classes, ce qui peut devenir difficile à maintenir

Mieux profiter des CSS

• CSS comprend aussi des sélecteurs plus avancés, qui permettent de limiter les divisions inutiles et le nombre de classes en s'appuyant au maximum sur les informations données « naturellement » par la structure du HTML :
  • sélecteurs de descendance
  • sélecteurs d'adjacence
  • pseudo-classes
  • pseudo-éléments
• On peut également associer tous ces sélecteurs ensemble, et notamment avec les classes.

Sélecteurs de descendance

• Descendance
  nav a : tout élément a descendant d'un élément nav
• Enfant
  nav > a : tout élément a fils direct d'un élément nav

<nav>
	Liste de liens :
	<ul>
		<li><a href="">un lien dans la liste</a></li>
		<li><a href="">un autre lien dans la liste</a></li>
	</ul>
	On peut aussi cliquer sur <a href="">ce lien-ci</a>
	ou <a href="">celui-là</a>, mais ils ne sont pas dans la liste.
</nav>

nav a {
	color: tomato;
}

nav > a {
	font-weight: bold;
}

Sélecteurs d'adjacence

• Adjacence +
h2 + p : tout élément p suivant immédiatement un élément h2
• Parent commun ~
h2 ~ p : tout élément p suivant un élément h2 (mais pas forcément immédiatement)
• NB : comme pour les sélecteurs de descendance, l'élément sur lequel s'applique la règle est le dernier

<ul>
    <li>un item</li>
    <li class="toto">
        un item de classe <code>toto</code>
    </li>
    <li>un autre item</li>
    <li>un autre item</li>
    <li>un dernier item</li>
</ul>
<p>Une deuxième liste :</p>
<ul>
    <li>avec un item</li>
    <li>et un autre</li>
</ul>

.toto + li {
	color: forestgreen;
	font-weight: bold;
}

.toto ~ li {
	background-color: gold;
}

Attention, dans les deux cas, les deux éléments doivent avoir le même parent ! Dans l'exemple, les li de la deuxième liste ne sont pas colorés.

Pseudo-classes

• Autre catégorie de sélecteurs plus avancés
• Objectif : pouvoir sélectionner des éléments ayant une caractéristique qui peut changer dynamiquement
• Par exemple, pour changer la couleur des liens lorsque l'on passe la souris dessus :

  a:hover { color: black; background-color: red; }
  

• :hover est une pseudo-classe : c'est comme si le navigateur ajoutait en direct une classe spéciale à un lien qui est en train d'être survolé
• Syntaxe : chaque pseudo-classe commence par un caractère « deux-points »
• Attention, on peut utiliser n'importe quoi comme nom de classe, mais la liste des pseudo-classes utilisables est fixée ! Chaque pseudo-classe a un sens précis connu par le navigateur.

Styler les liens

• Pseudo-classes concernant les liens :

  a:link { color: green; }  /* par défaut */
  a:visited { color: orange; }  /* déjà visité */
  a:hover { color: black; background-color: red; }  /* pendant le survol */
  a:focus { color: #aaa; font-size: 150%; }  /* focus clavier */
  a:active { color: yellow; }  /* pendant le clic */
  

• Résultat : exemples de liens qui utilisent CSS
• Attention à l'ordre !
• Remarque : les propriétés qu'il est possible de modifier via :visited sont très limitées (essentiellement les couleurs et rien d'autre), pour des raisons de respect de la vie privée

Utilisation de ces pseudo-classes sur d'autres éléments

• On peut modifier le style de n'importe quel élément en fonction de la position de la souris, ou de la convergence clavier quand cela a un sens :

  <p>Passer la souris sur cette phrase</p>
  <input type="text" value="Mettre le curseur ici" />
  <p>Cliquer sur le mot en gras : <strong>dimétrodon</strong></p>

  p:hover {
  	background-color: aquamarine;
  }
  
  input:focus {
  	background-color: tomato;
  }
  
  strong:active {
  	background-color: gold;
  }
  

  Passer la souris sur cette phrase

  Cliquer sur le mot en gras : dimétrodon

• :hover est extrêmement utile pour rendre les pages un peu plus interactives
• il permet notamment de faire des menus déroulants, comme expliqué sur le tuto suivant : Topo et démos sur les menus déroulants

Sélectionner un élément sur deux

• Très courant : on a besoin d'appliquer un style à un élément sur deux (typiquement, les lignes d'un tableau)
• Solution classique : utiliser deux classes différentes (.sombre et .clair)
• Depuis CSS3 : pseudo-classes pour sélectionner des élements selon leur rang
• :nth-child(odd) sélectionne les éléments de rang impair, :nth-child(even) sélectionne les éléments de rang pair

Fils de même type

• Attention, le comportement de :nth-child peut ne pas être intuitif : img:nth-child(odd) ne sélectionne pas une image sur deux, mais tous les éléments qui sont des fils impairs et aussi des images !
• c'est la conjonction des deux conditions
• Pour sélectionner une image sur deux, il faut utiliser img:nth-of-type(odd) ou img:nth-of-type(even)
• Formellement : :nth-of-type(odd) sélectionne un élément s'il est de rang impair dans la liste des fils de même type de son parent

Sélectionner le premier ou le dernier fils

• :first-child sélectionne les éléments qui sont le premier fils de leur parent
• :last-child sélectionne les éléments qui sont le dernier fils de leur parent
• :first-of-type, :last-of-type premier ou dernier fils d'un type donné

Pseudo-éléments

• Pseudo-classe : sélectionne dynamiquement un élément du document selon certains critères
• Pseudo-élément : sélectionne dynamiquement un élément qui n'existe pas en tant que tel dans le document
• ::first-line : pseudo-élément qui sélectionne la première ligne de texte d'un élément
• ::first-letter : pseudo-élément qui sélectionne la première lettre d'un élément
• Attention : vous risquez de rencontrer parfois l'ancienne syntaxe (CSS2) des pseudo-éléments, avec un seul : (comme pour les pseudo-classes).
• La « nouvelle » syntaxe est supportée partout : il est conseillé de l'utiliser pour bien faire la différence, car pseudo-classes et pseudo-éléments fonctionnent de façon très différente
  • #toto:hover sélectionne toto (s'il est survolé), mais
  • #toto::first-line ne sélectionne pas toto, mais un (pseudo-)fils.
• La confusion est facile en particulier entre :first-child (pseudo-classe) et ::first-line (pseudo-élément) !

Génération de contenu

• Les pseudo-éléments ::before, ::after permettent d'insérer du contenu au début ou à la fin d'un élément, grâce à la propriété content
• Exemple :

  #toto::after {
      content: "je suis le dernier";
  }
  

  ajoute un fils à l'élément d'identifiant toto, qui contient le texte je suis le dernier, et qui est situé après tous les fils de toto.
• On peut également utiliser ces pseudo-éléments pour ajouter une image, en donnant son URL à la propriété content. Exemple :

  #toto::after {
      content: url('logo.png');
  }