21 - Les sélecteurs avancés

Sélecteurs d’enfants

Ces sélecteurs sélectionnent les éléments qui sont à l'intérieur d'autres éléments. Le sélecteur d'enfant est séparé par un espace.


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      div {
        background: blue;
      }
      .container div {
        background: red;
      }
      .container div div {
        background: green;
      }
    </style>
  </head>
  <body>
    <div>Mon bloc exemple</div>
    <div class="container">
      <div>Item 1</div>
      <div>Item 2</div>
      <div>Item 3</div>
      <div>
        Item 4
        <div>Sous-item</div>
      </div>
    </div>
  </body>
</html>

Dans cet exemple, tous les div enfants de container seront en rouge.

C’est un comportement qui n’est peut être pas souhaitable. Vous pouvez alors utiliser un sélecteur d’enfant direct pour éviter ce comportement.

Sélecteurs d’enfants direct.


<style>
div {
	background:blue;
}
.container > div{
	background:red;
}

</style>

<div>Mon bloc exemple</div>
<div class="container">
	<div>Item 1</div>
	<div>Item 2</div>
	<div>Item 3</div>
	<div>
			Item 4
			<div>Sous-item</div>	
	</div>

</div>

Ici, grâce au symbole “>” , vous ciblerez alors les enfants directs de container et non plus les sous-enfants.

Sélecteurs voisins

Ces sélecteurs sélectionnent les éléments qui sont immédiatement à côté d'autres éléments. Il est formé par deux éléments séparés par le signe "+".

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
        h1,h2,h3,h4,p{
            margin:0;
        }

  
        p {
            margin-bottom:1rem;
        }

        p + h1, 
        p + h2, 
        p + h3, 
        p + h4 
            {
                margin-top:2rem;
            }

        </style>

    </style>
  </head>
  <body>
    <h1>Mon titre 1</h1>
    <p>Un paragraphe</p>
    <p>Un paragraphe</p>
    <h2>Mon titre 2</h2>
    <p>Un paragraphe</p>
    <p>Un paragraphe</p>
    <h2>Mon titre 2</h2>
    <p>Un paragraphe</p>
    <p>Un paragraphe</p>
    <h3>Mon titre 3</h3>
    <p>Un paragraphe</p>
    <h4>Mon titre 4</h4>
    <p>Un paragraphe</p>
    <p>Un paragraphe</p>
    <p>Un paragraphe</p>
    <p>Un paragraphe</p>

</body>
</html>

Sélecteurs qui “comptent”

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      li:first-child {
        background-color: yellow;
      }
      ul li:nth-child(3) {
        background: green;
      }
      ul li:last-child {
        background: red;
      }

      ol li:nth-child(odd) {
        background-color: blue;
      }

      ol li:nth-child(even) {
        background-color: orange;
      }
    </style>
  </head>
  <body>
    <ul class="ma_liste">
      <li>Mon premier élement</li>
      <li>Mon deuxième élement</li>
      <li>Mon troisième élement</li>
      <li>Mon quatrième élement</li>
    </ul>

    <ol>
      <li>Mon premier élement</li>
      <li>Mon deuxième élement</li>
      <li>Mon troisième élement</li>
      <li>Mon quatrième élement</li>
    </ol>
  </body>
</html>