- CSS>selecteur -
- Publié le : | Modifié le :
Liste des sélecteurs CSS.
Un tableau récapitulatif des sélecteurs CSS. Très utile à avoir sous la main dès qu'on développe pour le web.
Source: w3schools.com: CSS Selector Reference. Et aussi L'Exemple.
La Liste des sélecteurs CSS.
- *
- *
- Sélectionne tous les éléments du document
- CSS 1
- element
- div
- Sélectionne toutes les balises <div> dans le document.
- CSS 1
- element, element
- div, p
- Sélectionne toutes les balises <div> et toutes les balises <p> dans le document.
- CSS 1
- .class
- .ma_class
- Sélectionne tous les éléments qui ont pour attribut class="ma_class"
- CSS 1
- #id
- #mon_id
- Sélectionne tous les éléments qui ont pour attribut id="mon_id"
- CSS 1
- element>element
- div>p
- Sélectionne toutes les balises <p> qui ont pour parent immédiat une balise <div>
- CSS 2
- element+element
- div+p
- Sélectionne toutes les balises <p> qui sont placées immédiatement après une balise <div>
- CSS 2
- element1~element2
- p~ul
- Sélectionne chaque balise <ul> qui est précédée par une balise <p>
- CSS 3
- [attribute]
- [target]
- Sélectionne toutes les balises qui ont un attribut target
- CSS 2
- [attribute=valeur]
- [target=_blank]
- Sélectionne toutes les balises qui ont un attribut target="_blank"
- CSS 2
- [attribute|=valeur]
- [lang|=en]
- Sélectionne toutes les balises qui ont un attribut lang qui commence par "en"
- CSS 2
- :lang(language)
- p:lang(it)
- Sélectionne chaque balise <p> avec un attribut lang qui commence par "it"
- CSS 2
- [attribute^=value]
- a[src^="https"]
- Sélectionne chaque balise <a> dont l'attribut src commence par "https"
- CSS 3
- [attribute$=value]
- a[src$=".pdf"]
- Sélectionne chaque balise <a> dont l'attribut src se termine par ".pdf"
- CSS 3
- [attribute*=value]
- a[src*="w3schools"]
- Sélectionne chaque balise <a> dont l'attribut src contient la sous-chaine "w3schools"
- CSS 3
- :link
- a:link
- Sélectionne tous les liens non visités
- CSS 1
- :visited
- a:visited
- Sélectionne tous les liens visités
- CSS 1
- :active
- a:active
- Sélectionne le lien actif
- CSS 1
- :hover
- a:hover
- Sélectionne les liens au survol de la souris
- CSS 1
- :focus
- input:focus
- Sélectionne la balise <input> qui a le focus
- CSS 2
- :first-letter
- p:first-letter
- Sélectionne la premère lettre de chaque balise <p>
- CSS 1
- :first-line
- p:first-line
- Sélectionne la premère ligne de chaque balise <p>
- CSS 1
- :before
- p:before
- Insère un contenu avant chaque balise <p>
- CSS 2
- :after
- p:after
- Insère un contenu après chaque balise <p>
- CSS 2
- :first-child
- p:first-child
- Sélectionne chaque balise <p> qui est le première enfant de son parent.
- CSS 2
- :last-child
- p:last-child
- Sélectionne chaque balise <p> qui est le dernier enfant de son parent
- CSS 1
- :first-of-type
- p:first-of-type
- Sélectionne chaque balise <p> qui est la première balise <p> de son parent
- CSS 3
- :last-of-type
- p:last-of-type
- Sélectionne chaque balise <p> qui est la dernière balise <p> de son parent
- CSS 3
- :only-of-type
- p:only-of-type
- Sélectionne chaque balise <p> qui est la seule balise <p> de son parent
- CSS 3
- :only-child
- p:only-child
- Sélectionne chaque balise <p> qui est le seul enfant de son parent
- CSS 3
- :nth-child(n)
- p:nth-child(2)
- Sélectionne chaque balise <p> qui est le second enfant de son parent
- CSS 3
- :nth-last-child(n)
- p:nth-last-child(2)
- Sélectionne chaque balise <p> qui est le second enfant de son parent, en partant du dernier enfant
- CSS 3
- :nth-of-type(n)
- p:nth-of-type(2)
- Sélectionne chaque balise <p> qui est la seconde balise <p> de son parent
- CSS 3
- :nth-last-of-type(n)
- p:nth-last-of-type(2)
- Sélectionne chaque balise <p> qui est la seconde balise <p> de son parent, en partant du dernier enfant
- CSS 3
- :root
- :root
- Sélectionne la balise root du document
- CSS 3
- :empty
- p:empty
- Sélectionne chaque balise <p> qui n'a pas d'enfant( en incluant le texte)
- CSS 3
- :target
- #news:nom_ancre
- Sélectionne la balise ayant comme id="news", qui a été cliquée sur une URL contenant "ma_page.html#nom_ancre"
- CSS 3
- :enabled
- input:enabled
- Sélectionne chaque balise <input> qui a la prorpiété enabled( <input type="text" >)
- CSS 3
- :disabled
- input:disabled
- Sélectionne chaque balise <input> qui a la prorpiété disabled( <input type="text" disabled>)
- CSS 3
- :checked
- input:checked
- Sélectionne chaque balise <input> qui a la prorpiété checked( <input type="checkbox" checked>)
- CSS 3
- :not(selector)
- :not(p)
- Sélectionne chaque balise qui n'est pas une balise <p>
- CSS 3
- ::selection
- ::selection
- Sélectionne le texte dans une balise qui a été sélectionnée par un utilisateur
- CSS 3
- :valid
- input:valid
- Sélectionne chaque balise <input> qui a une valeur valide(ref formulaire)
- CSS 3