-
Les Sélecteurs
Selecteur Exemple Explication CSS .classe .exemple Selectionne tous les éléments avec class="exemple" 1 #id #prenom Selectionne l'élément avec id="prenom" 1 * * Selectionne tous les éléments 2 element h1 Selectionne tous les éléments <h1> 1 element,element div,p Selectionne toutes les balises <div> et toutes les balises <p> 1 element element div p Selectionne toutes les balises <p> contenues dans les balises <div> 1 element>element div>p Selectionne toutes les balises <p> dont le parent est une balise <div> 2 element+element div+p Selectionne les balises <p> placées immédiatement après une balise <div> 2 [attribut] [target] Selectionne tous les éléments qui ont un attribut target 2 [attribut=valeur] [target=_blank] Selectionne tous les éléments dont l'attribut target="_blank" 2 [attribut~=valeur] [title~=fleur] Selectionne tous les éléments dont l'attribut title contient le mot "fleur" 2 [attribut|=valeur] [lang|=fr] Selectionne tous les éléments dont l'attribut lang commence par "fr" 2 :link a:link Selectionne tous les liens non visités 1 :visited a:visited Selectionne tous les liens visités 1 :active a:active Selectionne le lien actif 1 :hover a:hover Selectionne les liens survolés par la souris 1 :focus input:focus Selectionne l'élément input qui a le focus 2 :first-letter p:first-letter Selectionne la première lettre de chaque balise <p>_ 1 :first-line p:first-line Selectionne la première ligne de chaque élément <p> 1 :first-child p:first-child Selectionne chaque élément <p> qui est le premier enfant de son parent 2 :before p:before Insère du contenu avant chaque élément <p> 2 :after p:after Insère du contenu après chaque élément <p> 2 :lang(langage) p:lang(it) Sélectionne chaque élément <p> avec la valeur de l'attribut lang commençant par "it" 2 element1~element2 p~ul Sélectionne chaque élément <ul> qui est précédé d'un élément <p> 3 [attribut^=valeur] a[src^="https"] Sélectionne chaque élément <a> dont la valeur de l'attribut source commence par "https" 3 [attribut$=valeur] a[src$=".pdf"] Sélectionne chaque élément <a> dont la valeur de l'attribut src finit par ".pdf" 3 [attribut*=valeur] a[src*="eklablog"] Sélectionne chaque élément <a> dont la valeur de l'attribut src contient la chaine "eklablog" 3 :first-of-type p:first-of-type Sélectionne chaque élément <p> qui est le premier élément <p> de son parent 3 :last-of-type p:last-of-type Sélectionne chaque élément <p> equi est le dernier élément <p> de son parent 3 :only-of-type p:only-of-type Sélectionne chaque élément <p> qui est le seul élément <p> de son parent 3 :only-child p:only-child Sélectionne chaque élément <p> qui est le seul enfant de son parent 3 :nth-child(n) p:nth-child(2) Sélectionne chaque élément <p> qui est le secont enfant de son parent 3 :nth-last-child(n) p:nth-last-child(2) Sélectionne chaque élément <p> qui est le secont enfant de son parent en partant du dernier 3 :nth-of-type(n) p:nth-of-type(2) Sélectionne chaque élément <p> qui est le second élément <p> de son parent 3 :nth-last-of-type(n) p:nth-last-of-type(2) Sélectionne chaque élément <p> qui est le second élément <p> de son parent, en comptant depuis le dernier 3 :last-child p:last-child Sélectionne chaque élément <p> qui est le dernier enfant de son parent 3 :root :root Sélectionne l'élément racine du document 3 :empty p:empty Sélectionne chaque élément <p> qui n'a pas d'enfant.(Y compris les noeuds texte) 3 :target #news:target Selects the current active #news element (clicked on a URL containing that anchor name) 3 :enabled input:enabled Sélectionne chaque élément <input> actif 3 :disabled input:disabled Sélectionne chaque élément <input> désactivé 3 :checked input:checked Sélectionne chaque élément <input> coché 3 :not(selecteur) :not(p) Sélectionne tous les éléments qui ne sont pas des <p> 3 ::selection ::selection Sélectionne l'élément surligné 3
-
Commentaires
Pas de problème
En ce moment je développe http://jslibrairie.ek.la/ , il y a pas mal de choses sympas
Ajouter un commentaire
Bravo pour tes blogs. Je viens de lire un article sur Hadopi sur un des autres, c'est clairement amusant !
En tous cas, merci pour ton aide précieuse, tes codes css fonctionne à merveille !