CSS sélecteur

<link rel="stylesheet" type="text/css" href="style.css">


* {font-size: 14px;color:orange;}    /* selectionne tout ne sert à rien seul */
h1 { color: navy; }                  /* une balise*/
li a {font-size: 10px;}              /* espace -> sélectionne tous les a contenu dans un li, ne sélectionne pas le li */
p > img {text-align: center;}        /* La même chose, mais ne prends img que si tout de suite après p, pas d'autres balises sur le chemin */
h1, h2, h3 {background-color: red;}  /* sélectionne toutes les h1 et h2 et h3*/

.message{ 
   border: 1px solid black; 
   background: white;
}
<div id="prix" class="message"> ... </div>              /* affecte la class message au div*/
<div id="qte"  class="message"> ... </div>              /* même class sur un autre div*/

#msg2{ border: 1px solid black; }                       /* comme une classe mais doit être unique */
<div id="mesg2">      ... </div>                        /* affecte le style mesg2 au div*/

div[tarif] { color: blue; }                             /* tous les div qui ont un attribut tarif*/
<div id="mesg3" tarif="3.20"> ... </div>                /* affecte le style mesg3 au div*/

div[code_postal="38500"] { color: red; }                /* tous les div dont l'attribut code_postal vaut 38500*/
<div id="mesg3" code_postal="38500"> ... </div>         /* affecte le style mesg3 au div*/

div[code_postal=^"38"] { color: pink; }                /* tous les div dont l'attribut code_postal commence pas 38*/
div[code_postal=~"38"] { color: pink; }                /* tous les div dont l'attribut code_postal contient  38*/
<div id="mesg3" code_postal="38 75 33 01"> ... </div>  /* affecte le style mesg3 au div*/

a {}  a:hover {}  a:visited  a:active .menu a:hover {}  div:hover

p:first-child /* premier sous-element*/
p i:first-child  /* premier sous-truc des i qui sont dans des p */

/* si plusieurs règles s'appliquent à un même élément  c'est la moins générale, la plus précise, qui l'emporte*/
p{color:red;}
.message{color:green;}
<p class="message"></p>  /* sera green*/

/*                            */

 

     

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

one + seven =