sélecteurs

Sélection 1.

Border de rouge tous les paragraphes sauf ceux ayant un attribut class de valeur A.

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

    <head>
        <meta charset="utf-8">
        <title> bordures </title>
        <style>
            
        </style>
    </head>
    
    <body>
         <p class="A"> paragraphe </p>
         <p class="B"> paragraphe </p>
         <p class="C"> paragraphe </p>
         <p class="D"> paragraphe </p>
         <p class="E"> paragraphe </p>
         <p class="F"> paragraphe </p>
         <p class="G"> paragraphe </p>
         <p class="A"> paragraphe </p>
         <p class="B"> paragraphe </p>
    </body>
</html>

Il existe plusieurs solutions.

En voici une.

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

    <head>
        <meta charset="utf-8">
        <title> bordures </title>
        <style>
            p:not([class="A"]){
                border: 2px solid red;
            }
        </style>
    </head>
    
    <body>
         <p class="A"> paragraphe </p>
         <p class="B"> paragraphe </p>
         <p class="C"> paragraphe </p>
         <p class="D"> paragraphe </p>
         <p class="E"> paragraphe </p>
         <p class="F"> paragraphe </p>
         <p class="G"> paragraphe </p>
         <p class="A"> paragraphe </p>
         <p class="B"> paragraphe </p>
    </body>
</html>

Sélecteurs 2.

Sélectionner tous les paragraphes dont l'attribut class commence par "exe" et donnez leur un fond jaune.

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

    <head>
        <meta charset="utf-8">
        <title> exe </title>
        <style>
             
        </style>
    </head>
    
    <body>
          <p class="exercice"> exercice 1</p>
          <p class="example"> exemple in english </p>
          <p class="exemple"> exemple in french </p>
          <p class="exempte"> exemption</p>
          <p class="aha"> oh </p>
    </body>
</html>

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

    <head>
        <meta charset="utf-8">
        <title> exe </title>
        <style>
             p[class^="exe"]{
                background-color: rgb(255,255,0);
             }
        </style>
    </head>
    
    <body>
          <p class="exercice"> exercice 1</p>
          <p class="example"> exemple in english </p>
          <p class="exemple"> exemple in french </p>
          <p class="exempte"> exemption</p>
          <p class="aha"> oh </p>
    </body>
</html>

Sélecteurs 3.

Donner un fond rouge avec un cadre noir aux éléments a et aux éléments span, sauf aux éléments span ayant un attribut title.

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

    <head>
        <meta charset="utf-8">
        <title> inline</title>
        <style>
             
        </style>
    </head>
    
    <body>
          <a href="#"> lien 1 </a>
          <p> Le <a href="#"> lien 2 </a> ne mène à <span> rien </span>.</p>
          <p> Le <a href="#"> lien 3 </a> ne mène à <span title="rien de rien"> rien non plus</span>.</p>
          
    </body>
</html>

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

    <head>
        <meta charset="utf-8">
        <title> inline</title>
        <style>
             a, span:not([title]) {
                background-color: red;
                border: 1px solid black;
              }
        </style>
    </head>
    
    <body>
          <a href="#"> lien 1 </a>
          <p> Le <a href="#"> lien 2 </a> ne mène à <span> rien </span>.</p>
          <p> Le <a href="#"> lien 3 </a> ne mène à <span title="rien de rien"> rien non plus</span>.</p>
          
    </body>
</html>