sélecteurs

Sélectionner les descendants

On aimerait sélectionner tous les éléments d'un type donné qui sont descendants d'un élément.

Dans l'exemple ci-dessous, on sélectionne tous les éléments p descendants d'un élément article.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> attribut  </title>
        <style>
         article p { color: red;}
        </style>
    </head>
    <body>
    
          <p> un paragraphe non descendant d'un article </p>
          
          
          
          <section>
			  
            <article> 
                 <p> un paragraphe  descendant d'un article </p>
                 <p> un paragraphe  descendant d'un article </p>
                 <div>
                    <p> un paragraphe  descendant d'un article </p>
                 </div>
            </article>
            
            <p> un paragraphe non descendant d'un article </p>
            
          </section>
          
          
          
          
          <p> un paragraphe non descendant d'un article </p>
          
    </body>
</html>

On peut aussi par exemple sélectionner tous les éléments ayant un attribut title (infobulle) descendant d'une section:

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> attribut  </title>
        <style>
         section [title] { color: red;}
        </style>
    </head>
    <body>
    
          <p> un paragraphe  A </p>
          
          
          <section>
			  
            <article> 
                 <p> un paragraphe B   </p>
                 <p title="descendant d'une section"> un paragraphe C   </p>
                 <div>
                    <p title="descendant d'une section"> un paragraphe  D  </p>
                    <p> un paragraphe  E  </p>
                 </div>
                 
                 <p title="coucou"> un paragraphe F   </p>
            </article>
            
            <p title="bah"> un paragraphe  G </p>
            <p> un paragraphe H   </p>
            
          </section>
          
          
          <p title="zou"> un paragraphe I </p>
          
    </body>
</html>

Sélectionner

On souhaite maintenant sélectionner les enfants directs.

On reprend l'exemple précédent, mais on ne sélectionne cette fois que les enfants directs de l'élément section et ayant un attribut title.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> attribut  </title>
        <style>
         section>[title] { color: red;}
        </style>
    </head>
    <body>
    
          <p> un paragraphe  A </p>
          
          <section>
			  
            <article> 
                 <p> un paragraphe B   </p>
                 
                 <p title="descendant d'une section"> fils d'article, petit-fils de section   </p>
                 <div>
                    <p title="descendant d'une section"> 
						fils de div, petit-fils d'article,
						arrière-petit-fils de section.
                    </p>
                    <p> un paragraphe  E  </p>
                 </div>
                 
                 <p title="coucou"> fils d'article, petit-fils de section   </p>
            </article>
            
            <p title="bah"> fils de section </p>
            
            <p> fils de section mais sans attribut title  </p>
            
          </section>
          
          <p title="zou"> un paragraphe I </p>
          
    </body>
</html>

Sélectionner le n ième enfant.

On souhaite maintenant sélectionner les enfants directs de numéros donnés dans la fratrie des enfants.

Enfant numéro 1 d'un type d'élément

Dans l'exemple ci-dessous, on sélectionne l'enfant aîné de chaque section.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> attribut  </title>
        <style>
          section>:nth-child(1) { border: 1px solid red;}
        </style>
    </head>
    <body>
    
          <p> un paragraphe  A </p>
          
          
          
          <section>
			  
            <article> 
                 <p> un paragraphe B   </p>
                 <p title="descendant d'une section"> un paragraphe C   </p>
                 <div>
                    <p title="descendant d'une section"> un paragraphe  D  </p>
                    <p> un paragraphe  E  </p>
                 </div>
                 
                 <p title="coucou"> un paragraphe F   </p>
            </article>
            
            <p title="bah"> un paragraphe  G </p>
            <p> un paragraphe H   </p>
            
          </section>
          
          
          
          <p title="zou"> un paragraphe I </p>
          
          
          
          
          <section>
			  
            <p> un enfant de la section </p>
           
            <article>
                <span>un autre enfant</span>  de la section.
            </article>
            
          </section>
          
    </body>
</html>

Dans la première section, l'enfant 1 est l'article. Dans la deuxième section l'enfant 1 est le paragraphe.

Enfant numéro 1 des descendants

On reprend l'exemple précédent. Cette fois on sélectionne l'enfant 1 des sections mais aussi des éléments descendants.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> attribut  </title>
        <style>
            *{margin : 3px;}
          section :nth-child(1) { border: 1px solid red;}
        </style>
    </head>
    <body>
    
          <p> un paragraphe  A </p>
          
          <section>
            <article> 
                 <p> un paragraphe B   </p>
                 <p title="descendant d'une section"> un paragraphe C   </p>
                 <div>
                    <p title="descendant d'une section"> un paragraphe  D  </p>
                    <p> un paragraphe  E  </p>
                 </div>
                 
                 <p title="coucou"> <a href="#"> un lien</a> et un texte   </p>
            </article>
            <p title="bah"> un paragraphe  G </p>
            <p> un paragraphe H   </p>
          </section>
          
          <p title="zou"> un paragraphe I </p>
          
          
          <section>
            <p> un enfant de la section </p>
            <article>
                 <span>un autre enfant</span>  de la section.
            </article>
          </section>
    </body>
</html>

Enfants pairs

On sélectionne tous les enfants de numéro pair dans la fratrie descendante du div :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> attribut  </title>
        <style>
            div :nth-child(2n) { color: orange;}
        </style>
    </head>
    <body>
		
        <div>
			
          <p> un paragraphe  1 </p>
          <p> un paragraphe  2 </p>
          <p> un paragraphe  3 </p>
          <p> un paragraphe  4 </p>
          <p> un paragraphe  5 </p>
          
          <article>
          un article descendant pair
          </article>
          
        </div>
        
    </body>
</html>

Mais on peut également décidé de ne sélectionner que les éléments de type p dans les descendants pairs :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> attribut  </title>
        <style>
            div p:nth-child(2n) { color: orange;}
        </style>
    </head>
    <body>
		
        <div>
			
          <p> un paragraphe  1 </p>
          <p> un paragraphe  2 </p>
          <p> un paragraphe  3 </p>
          <p> un paragraphe  4 </p>
          <p> un paragraphe  5 </p>
          
          <article>
          un article descendant pair
          </article>
          
        </div>
        
    </body>
</html>

Cette fois l'élément article n'est pas sélectionné.

Sélectionner le n ième enfant de type donné.

Dans l'exemple ci-dessous, on sélectionne les enfants de type p impairs :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> attribut  </title>
        <style>
            div p:nth-of-type(2n+1) { color: orange;}
        </style>
    </head>
    <body>
		
        <div>
			
          <p> un paragraphe, enfant 1 de div, 1er de type p </p>
          
          <article>
           un article, enfant 2 mais non de type p
          </article>
           
          <p> un paragraphe, enfant 3 de div et 2 ème de type p </p>
          <p id="pair_ou_impair"> un paragraphe, enfant  4 de div et 3 ème de type p </p>
          <p> un paragraphe  4 </p>
          <p> un paragraphe  5 </p>
          
          <article>
           un article 
          </article>
          
        </div>
        
    </body>
</html>

Le paragraphe identifié par id="pair_ou_impair" est orange : il est de numéro pair comme enfant de div, mais de numéro impair dans le type ciblé et c'est ce qui compte ici.