/* Exercice 1 */

/* -----Sélectionnez tous les liens dans la navigation---- */
nav a {
    color: brown;
}

/* ----Sélectionnez uniquement le lien actif---- */

a[class*="active"] {
    color: rgb(255, 2, 2);
}

/* -----Sélectionnez l'article qui a la classe featured----- */

article[class*="featured"] {
    background-color: aqua;
}

/* ou */
article.featured {
    background-color: aqua;
}

/* -----Sélectionnez le premier paragraphe de chaque article---- */

article>p:first-of-type {
    color: green;
}

/* -----Sélectionnez les éléments <li> pairs---- */
ul>li:nth-child(even) {
    background-color: blue;
}


/* 

    1. Classez ces sélecteurs par spécificité croissante : p, .text, #main, p.text, #main .text p
    
    ==> la reponse est: p < .text < p.text < #main < #main .text p

    2. Si deux règles ont la même spécificité, laquelle gagne ?

    ==> la dernière règle écrite dans ton fichier CSS l'emporte.

    3. Pourquoi faut-il éviter !important ?
    
    ==> car il casse la nature de cascade, au niveau de css , tell que il devient impossible d'overrider cette propriete de css .
    pour vous donnez la possibilite de faire sa il faut faire !important aussi pour cette element -> sa va nous donne une garre de !important(pas practique)

*/


/* 
    Exercice 2:

    1. la largeur total est le content ,la margin ,padding ,... donc dans ce cas 340px
    2. par l'utilisation de box-sizing:border-box ,sa signifie que la largeur de tout l'element est le width ici est le 300px
    3. la reset univ :
        *, *::before, *::after{
            borx-sizing: border-box;
        }

    ==> Centrer un élément
        div{
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
        }

*/