Les sélecteurs

:nth-child

Pour colorer une ligne sur deux sur un tableau, jusqu'a présent il fallait utiliser du Javascript.
On a maintenant une méthode bien plus simple le sélecteur :nth-child :

table tr:nth-child(odd){
   background-color:#EEF;
}

On utilise “odd” pour les « chiffres impairs » et “even” pour les chiffres pairs.

Séléction d’éléments par la valeur d’un de leurs attributs

[attribut^="valeur"] sélectionne les éléments dont l’attribut spécifié commence par une certaine valeur.

Voici un exemple d’utilisation :

HTML

<a href="../../mythologie/dieux-olympes.php">Les dieux de l'olympe (lien interne)</a>
<a href="http://www.alsacreations.com/" target="_blank">www.alsacreation (lien externe)</a>

CSS

a[href^="http://"] {
   background-color:red;
   color:white;
   padding:2px 5px;
}

Cela colorera uniquement les lien externes.

• Les dieux de l'olympe (lien interne)
• www.alsacreation (lien externe)

before & after

Nous voulons encadrer chaque phrases par les signes ">" et "<" en gras et de couleur rouge

• Ma première phrase
• Ma seconde phrase

HTML

<ul id="Before">
    <li>Ma première phrase
    <li>Ma seconde phrase
</ul>

CSS

#Before {
    list-style:none;
}

#Before li:before {
   content:">";
   color:red;
   font-weight:bold;
   padding-right:5px;
}

#Before li:after {
   content:"<";
   color:red;
   font-weight:bold;
   padding-left:5px;
}

Autre exemple : Effet au survol d'une image

[attr^="MaValeur"]

Ce sélecteur permet de sélectionner un élément DOM dont l'attribut "attr" commence exactement par la valeur "MaValeur".

Dans l'exemple ci-desous la valeur est : "ess"

CSS

p.example {
  margin:0;
  padding:10px;
  color:#000;
}

p.example[title^="ess"] {
  color:#fff;
  background:#333;
}

HTML

<p class="example"> je n'ai pas d'attribut title</p>
<p class="example" title="comment"> j'ai un attribut title mais il ne commence pas par "ess"</p>
<p class="example" title="essai"> j'ai un attribut title commençant par "ess"</p>
<p class="example" title="esson"> j'ai un attribut title commençant par "ess" également</p>

DEMO

je n'ai pas d'attribut title

j'ai un attribut title mais il ne commence pas par "ess"

j'ai un attribut title commençant par "ess"

j'ai un attribut title commençant par "ess" également

[attr$="MaValeur"]

Ce sélecteur permet de sélectionner un élément DOM dont l'attribut "attr" se termine exactement par la valeur "MaValeur".

Dans l'exemple ci-desous la valeur est : "on"

CSS

p.example2 {
  margin:0;
  padding:10px;
  color:#000;
}
p.example2[title$="on"] {
  color:#fff;
  background:#045FB4;
}

HTML

<p class="example2"> je n'ai pas d'attribut title</p>
<p class="example2" title="comment"> j'ai un attribut title mais il ne se termine pas par "on"</p>
<p class="example2" title="maison"> j'ai un attribut title qui se termine par "on"</p>
<p class="example2" title="raison"> j'ai un attribut title qui se termine par "on" également</p>

DEMO

je n'ai pas d'attribut title

j'ai un attribut title mais il ne se termine pas par "on"

j'ai un attribut title qui se termine par "on"

j'ai un attribut title qui se termine par "on" également

[attr*="MaValeur"]

Ce sélecteur permet de sélectionner un élément DOM dont l'attribut "attr" comporte au moins une fois la valeur "MaValeur".

Dans l'exemple ci-desous la valeur est : "on"

CSS

p.example3 {
  margin:0;
  padding:10px;
  color:#000;
}
p.example3[title*="val"] {
  color:#fff;
  background:#990000;
}

HTML

<p class="example3"> je n'ai pas d'attribut title</p>
<p class="example3" title="comment"> j'ai un attribut title mais il ne contient pas "val"</p>
<p class="example3" title="val"> j'ai un attribut title contenant au moins "val"</p>
<p class="example3" title="evaluer"> j'ai un attribut title contenant au moins "val" également</p>
<p class="example3" title="eval"> j'ai un attribut title contenant au moins "val" également</p>

DEMO

je n'ai pas d'attribut title

j'ai un attribut title mais il ne contient pas "val"

j'ai un attribut title contenant au moins "val"

j'ai un attribut title contenant au moins "val" également

j'ai un attribut title contenant au moins "val" également

[attr^="MaValeur"] + [attr~="MaValeur"] + [attr*="MaValeur"]

Dans cet exemple on cible les cellules spécifique d'une table

CSS

.example4 {
  width:100%;
}
.example4 td {
  padding: 3px;
  text-align: center;
  background-color:#FFFFFF;
}
.example4 td[title^="fan"] {
  background-color: #000099;
  color: #FFFFFF;
}
.example4 td[title*="val"] {
  background-color: #666666;
  color: #FFFFFF;
}
.example4 td[title$="que"] {
  background-color: #FF0000;
  color: #FFFFFF;
}

HTML

<table class="example4">
  <tr>
    <td>aucun attribut</td>
    <td title="fantastic" width="102">attribut : fantastic</td>
    <td>aucun attribut</td>
    <td title="magique" width="89">attribut : magique</td>
    <td>aucun attribut</td>
    <td title="évaluation"><p>attribut : évaluation</p></td>
    <td>aucun attribut</td>
  </tr>
</table>

DEMO

Avec le sélecteur [attr^="fan"] :
je recherche un attribut commencant par "fan" et je remplis l'arrière plan en bleu

Avec le sélecteur [attr*="val"] :
je recherche un attribut comportant "val" et je remplis l'arrière plan en gris

Avec le sélecteur [attr~="que"] :
je recherche un attribut se terminanant par "que" et je remplis l'arrière plan en rouge

Sélecteur + et >

Le sélecteur + sélectionne l'élément "X" (et lui seul), placé derrière.

Le sélecteur > sélectionne tous les éléments "X" placés derrière.

CSS

fieldset {
  border-color:#000066;
  min-height:100px;
  padding:10px;
  border-radius:10px;
  margin:20px 0px;
}
fieldset > legend {
  color: #FFFFFF;
  background-color: #000066;
  padding: 3px 6px;
  border-radius:10px;
  box-shadow:3px 3px 3px #999;
}
fieldset + p {
  color: #FFFFFF;
  background-color: #000066;
  padding: 3px 6px;
}

HTML

<fieldset>
  <legend>Ma légende est impactée par la règle : fieldset > legend</legend>
    <p>Or bends with the remover to remove. </p>
    <p>That looks on tempests and is never shaken; oh, no, it is an ever fixed mark love alters. </p>
    <p>Within his bending sickle's compass come; if this be error and upon me proved. </p>
    <p>Which alters when it alteration finds, I never writ, nor no man ever loved.</p>
</fieldset>
<p>fieldset + p : le premier paragraphe (balise "p") qui suit le fieldset est impacté par la règle</p>
<p>Par contre, le deuxième paragraphe n'est pas impacté par la règle.</p>

fieldset + p : le premier paragraphe (balise "p") qui suit le fieldset est impacté par la règle

Par contre, le deuxième paragraphe n'est pas impacté par la règle.