sélecteurs

Alternance.

Compléter le code css afin que les lignes du tableau apparaissent avec une alternance de couleur de fond : les lignes de rang pair sur fond jaune, les lignes de rang impair sur fond noir (avec un texte blanc). La ligne de l'en-tête sera elle sur fond rouge.

<!DOCTYPE html>
<html lang="fr">

    <head>
        <meta charset="utf-8">
        <title> table </title>
        <style>
           caption{font-size:0.8em;}
           table,th,td{
                border: 1px solid blue;
                border-collapse: separate;
            }
        </style>
    </head>
    
    <body>
          <table>
          <caption> Thèmes à étudier en css </caption>
          <thead>
          <tr> <td> Thème </td> </tr>
          </thead>
          <tbody>
          <tr> <td> sélecteurs </td> </tr>
          <tr> <td> couleurs  </td> </tr>
          <tr> <td> positionnement  </td> </tr>
          <tr> <td> bordures  </td> </tr>
          <tr> <td> ::before, ::after  </td> </tr>
          <tr> <td> centrer  </td> </tr>
          <tr> <td> dimensions d'une boîte  </td> </tr>
          </tbody>
          </table>
    </body>
</html>

<!DOCTYPE html>
<html lang="fr">

    <head>
        <meta charset="utf-8">
        <title> table </title>
        <style>
            caption{font-size:0.8em;}
            table,th,td{
                border: 1px solid blue;
                border-collapse: separate;
            }
            tbody>tr:nth-child(2n){
                background-color: yellow;
            }
            tbody>tr:nth-child(2n+1){
                background-color: black;
                color: white;
            }
            thead>tr{
                background-color: red;
            }
            
            /*un ajout : la ligne survolée prend un fond transparent */
            tbody>tr:hover{
                 background-color: transparent;
                 color: orange;
                 font-weight: bold;
            }
        </style>
    </head>
    
    <body>
          <table>
          <caption> Thèmes à étudier en css </caption>
          <thead>
          <tr> <td> Thème </td> </tr>
          </thead>
          <tbody>
          <tr> <td> sélecteurs </td> </tr>
          <tr> <td> couleurs  </td> </tr>
          <tr> <td> positionnement  </td> </tr>
          <tr> <td> bordures  </td> </tr>
          <tr> <td> ::before, ::after  </td> </tr>
          <tr> <td> centrer  </td> </tr>
          <tr> <td> dimensions d'une boîte  </td> </tr>
          </tbody>
          </table>
    </body>
</html>

Sélecteurs 2.

Écrire en vert les paragraphes qui suivent immédiatement un titre.

<!DOCTYPE html>
<html lang="fr">

    <head>
        <meta charset="utf-8">
        <title>  paragraphe suivant titre </title>
        
    </head>
    
    <body>
          <h1> Histoire de html </h1>
          <p> naissance en 1991.</p>
          <p> Auteur :   Tim Berners-Lee</p>
          
          <h2>  Les versions </h2>
          <p> html a connu plusieurs versions.</p>
          <p> Il faut distinguer les dates de développement, d'utilisation, d'officialisation... Les processus sont nombreux, parfois lents, parfois rapides.</p>
          <p> html 2.0 : 1995 </p>
          <p> html 3.2, 4.0 : 1997</p>
          <p> XHTML : 2000</p>
          <p> html 5 : à compter de 2007 dans la pratique </p>
          
          <h2> W3C, WHATWG </h2>
          <p> Le W3C a été fondé par Tim Berners-Lee   en octobre 1994.</p>
          <p> Sa gestion est assurée conjointement par le MIT aux États-Unis, l'ERCIM en Europe (dont l'INRIA en France), l'université Keio au Japon et l'université Beihang en Chine.</p>
           
    </body>
</html>

<!DOCTYPE html>
<html lang="fr">

    <head>
        <meta charset="utf-8">
        <title> paragraphe suivant titre </title>
        <style>
             h1+p, h2+p {color:green;}
        </style>
    </head>
    
    <body>
          <h1> Histoire de html </h1>
          <p> naissance en 1991.</p>
          <p> Auteur :   Tim Berners-Lee</p>
          
          <h2>  Les versions </h2>
          <p> html a connu plusieurs versions.</p>
          <p> Il faut distinguer les dates de développement, d'utilisation, d'officialisation... Les processus sont nombreux, parfois lents, parfois rapides.</p>
          <p> html 2.0 : 1995 </p>
          <p> html 3.2, 4.0 : 1997</p>
          <p> XHTML : 2000</p>
          <p> html 5 : à compter de 2007 dans la pratique </p>
          
          <h2> W3C, WHATWG </h2>
          <p> Le W3C a été fondé par Tim Berners-Lee   en octobre 1994.</p>
          <p> Sa gestion est assurée conjointement par le MIT aux États-Unis, l'ERCIM en Europe (dont l'INRIA en France), l'université Keio au Japon et l'université Beihang en Chine.</p>
           
    </body>
</html>

Sélecteurs 3.

Écrire en vert tous les paragraphes enfants directs de la section sauf le premier paragraphe de cette section, sans toucher au code html.

<!DOCTYPE html>
<html lang="fr">

    <head>
        <meta charset="utf-8">
        <title>  p </title>
        <style>
             
        </style>
    </head>
    
    <body>
          <section>
            <p> Paragraphe 1</p>
            <p> Paragraphe 2</p>
            <article>
                <p> Paragraphe 3</p>
                <p> Paragraphe 4</p>
            </article>
            <p> Paragraphe 5</p>
            <p> Paragraphe 6</p>
          </section>
    </body>
</html>

<!DOCTYPE html>
<html lang="fr">

    <head>
        <meta charset="utf-8">
        <title> p</title>
        <style>
             section>p~p {color:green;}
        </style>
    </head>
    
    <body>
          <section>
            <p> Paragraphe 1</p>
            <p> Paragraphe 2</p>
            <article>
                <p> Paragraphe 3</p>
                <p> Paragraphe 4</p>
            </article>
            <p> Paragraphe 5</p>
            <p> Paragraphe 6</p>
          </section>
    </body>
</html>

Les principes

Une façon sympathique d'apprendre la manipulation des sélecteurs : traiter les situations de cette page.

Lisez le cours se trouvant à droite de la page au fur et à mesure de votre lecture.

Pas de corrigé, mais n'hésitez pas à me poser des questions si vous bloquez sur une situation.

Vous pouvez faire le point sur les sélecteurs à l'aide de cette page.