sélecteurs

Adjacence directe

Avec X+Y , on sélectionne Y petit frère suivant immédiatement un élément X.

On sélectionne dans l'exemple suivant tous les éléments ul petit frère immédiat d'un élément p.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> attribut  </title>
        <style>
            p+ul{ border: 2px solid green;}
        </style>
    </head>
    <body>
    
          <p>   paragraphe  A </p>
          
           <ul>
            <li> item 1</li>
            <li> item 2</li>
           </ul>
           
           <ul>
            <li> item 1</li>
            <li> item 2</li>
           </ul>
           
           <p>  paragraphe  B </p>
          <p>  paragraphe  C </p>
          
           <ul>
            <li> item 1</li>
            <li> item 2</li>
           </ul>
           
           <ul>
            <li> item 1</li>
            <li> item 2</li>
           </ul>
    </body>
</html>

Adjacence indirecte

Avec X~Y , on sélectionne les Y petits frères d'un élément X.

On reprend l'exemple précédent, mais on sélectionne cette fois tous les éléments ul frère d'un élément p, quel que soit le rang dans la fratrie.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> attribut  </title>
        <style>
            p~ul{ border: 2px solid green;}
        </style>
    </head>
    <body>
    
          <p>   paragraphe  A </p>
          
           <ul>
            <li> item 1</li>
            <li> item 2</li>
           </ul>
           
           <ul>
            <li> item 1</li>
            <li> item 2</li>
           </ul>
           
           <p>  paragraphe  B </p>
          <p>  paragraphe  C </p>
          
           <ul>
            <li> item 1</li>
            <li> item 2</li>
           </ul>
           
           <ul>
            <li> item 1</li>
            <li> item 2</li>
           </ul>
    </body>
</html>