Selecteurs

Selecteur +
CSS

ul + p {
background:#756F32;}
Le sélecteur adjacent correspond à tout élément p 
immédiatement précédé par un élément ul.

Lorem ipsum dolor sit amet,
consectetur adipisicing elit,

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

Selecteur >
div > p le sélecteur d'enfant cible seulement le descendant direct.
HTML


<div class="boite2">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p> 

<p>et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut</p>
</div>
<p>et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut</p>

CSS

div > p{
    background:#F2AA3B;
}

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore

et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

Selecteur ~
div ~ p Ce selecteur est moins strict. Il cible tous les paragraphes qui suivent une liste non ordonnée.
HTML


<div class="boite3">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p> 

</div>

<p>et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut</p>

<p>et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut</p>

CSS

div ~ p{
    background:#756F32;
}

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore

et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

Selecteur []
Correspond à un bloc de classe boite ayant un attribut paragraphe de classe paragraphe.
.boite4 [classe="paragraphe"]
HTML


<div class="boite4">
<p class="paragraphe"> et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut</p>
</div>

CSS


.boite4 [class="paragraphe"]{
background:green;
}

et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

Selecteur [*]
HTML


<div class="bloc">

	<p class="paragraphe">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p> 

	<p class="paragraphe_2">et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut</p>

</div>

CSS

[class*="paragraphe"]{
background:#EBB288;
}

l'étoile indique que "paragraphe" doit se trouver quelque part dans la valeur de l'attribut.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore

et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

Selecteur [^]
HTML


<div class="bloc">

	<p class="paragraphe_1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p> 

	<p class="paragraphe_2">et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut</p>

</div>

CSS

[class^="paragraphe"]{
background:#EBB288;
}

Cible tous paragraphe dont la valeur de l'attribut commence par "paragraphe".

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore

et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

COMBINAISON POSSIBLE DES SELECTEURS 1
HTML


<div class="boite7">

	<p class="paragraphe">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>

	<p class="paragraphe_1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p> 

	<p class="paragraphe_2">et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut</p>

CSS

.boite7 > * {
width:45%;
display:inline-block;
margin:5px 0 0 20px;
padding:5px;
background:#1C618C;

Cible tous les paragraphes enfants.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore

et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

COMBINAISON POSSIBLE DES SELECTEURS 2
HTML


<div class="boite8">

	<p class="paragraphe">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>

	<p class="paragraphe_1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p> 

	<p class="paragraphe_2">et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut</p>

CSS

[class*="boite8"] > * {
width:45%;
display:inline-block;
margin:5px 0 0 20px;
background:#C4697A;
padding:5px;
}

Boite 8 doit se trouver quelque part dans l'attribut et cible tous les enfants direct.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore

et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut