Forum | Derniers tutoriels de développement web
×

CSS Référence

CSS Référence CSS sélecteurs CSS Les fonctions CSS Référence Aural CSS Safe Web Fonts CSS Animable CSS Unités CSS PX-EM Converter CSS Les couleurs CSS Couleur Valeurs CSS3 support du navigateur

CSS Propriétés

align-content align-items align-self all animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function backface-visibility background background-attachment background-blend-mode background-clip background-color background-image background-origin background-position background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width bottom box-shadow box-sizing caption-side clear clip color column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns content counter-increment counter-reset cursor direction display empty-cells filter flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap float font @font-face font-family font-size font-size-adjust font-stretch font-style font-variant font-weight hanging-punctuation height justify-content @keyframes left letter-spacing line-height list-style list-style-image list-style-position list-style-type margin margin-bottom margin-left margin-right margin-top max-height max-width @media min-height min-width nav-down nav-index nav-left nav-right nav-up opacity order outline outline-color outline-offset outline-style outline-width overflow overflow-x overflow-y padding padding-bottom padding-left padding-right padding-top page-break-after page-break-before page-break-inside perspective perspective-origin position quotes resize right tab-size table-layout text-align text-align-last text-decoration text-decoration-color text-decoration-line text-decoration-style text-indent text-justify text-overflow text-shadow text-transform top transform transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-function unicode-bidi vertical-align visibility white-space width word-break word-spacing word-wrap z-index



 

CSS Selector Référence


Remarque référence CSS w3ii 'est testé régulièrement avec tous les principaux navigateurs.


CSS Selectors

En CSS, les sélecteurs sont des modèles utilisés pour sélectionner l' element(s) que vous voulez style.

Le "CSS" colonne indique dans quelle version CSS la propriété est définie (CSS1, CSS2, or CSS3) .

Sélecteur Exemple Exemple Description CSS
. class .intro Sélectionne tous les éléments avec class="intro" 1
# id #firstname Sélectionne l'élément avec id="firstname" 1
* * Sélectionne tous les éléments 2
element p Sélectionne tous les <p> éléments 1
element,element div, p Sélectionne tous les <div> éléments et tous les <p> éléments 1
element element div p Sélectionne tous les <p> éléments à l' intérieur <div> éléments 1
element > element div > p Sélectionne tous les <p> éléments dont le parent est un <div> élément 2
element + element div + p Sélectionne tous les <p> éléments qui sont placés immédiatement après <div> éléments 2
element1 ~ element2 p ~ ul Sélectionne tous les <ul> élément qui sont précédés par un <p> élément 3
[ attribute ] [target] Sélectionne tous les éléments avec un attribut cible 2
[ attribute = value ] [target=_blank] Sélectionne tous les éléments avec target="_blank" 2
[ attribute ~= value ] [title~=flower] Sélectionne tous les éléments avec un attribut title contenant le mot "flower" 2
[ attribute |= value ] [lang|=en] Sélectionne tous les éléments avec une valeur d'attribut lang commençant par "en" 2
[ attribute ^= value ] a[href^="https"] Sélectionne tous les <a> élément dont href valeur d'attribut commence par "https" 3
[ attribute $= value ] a[href$=".pdf"] Sélectionne tous les <a> élément dont la valeur de l' attribut href se termine par ".pdf" 3
[ attribute *= value ] a[href*="w3ii"] Sélectionne tous les <a> élément dont href valeur d'attribut contient la sous - chaîne "w3ii" 3
:active a:active Sélectionne le lien actif 1
::after p::after Insérez quelque chose après le contenu de chaque <p> élément 2
::before p::before Insérez quelque chose avant que le contenu de chaque <p> élément 2
:checked input:checked Sélectionne tous les vérifier <input> élément 3
:disabled input:disabled Sélectionne toutes les personnes handicapées <input> élément 3
:empty p:empty Sélectionne tous les <p> élément qui n'a pas d' enfants (including text nodes) les (including text nodes) 3
:enabled input:enabled Sélectionne tous les permis <input> élément 3
:first-child p:first-child Sélectionne tous les <p> élément qui est le premier enfant de son parent 2
::first-letter p::first-letter Sélectionne la première lettre de chaque <p> élément 1
::first-line p::first-line Sélectionne la première ligne de chaque <p> élément 1
:first-of-type p:first-of-type Sélectionne tous les <p> élément qui est le premier <p> élément de son parent 3
:focus input:focus Sélectionne l'élément d'entrée qui a le focus 2
:hover a:hover Sélectionne les liens de la souris 1
:in-range input:in-range Sélectionne des éléments d'entrée d'une valeur dans une plage spécifiée 3
:invalid input:invalid Sélectionne tous les éléments d'entrée avec une valeur non valide 3
:lang( language ) p:lang(it) Sélectionne tous les <p> élément avec un lang attribut égal à "it" (Italian) 2
:last-child p:last-child Sélectionne tous les <p> élément qui est le dernier enfant de son parent 3
:last-of-type p:last-of-type Sélectionne tous les <p> élément qui est le dernier <p> élément de son parent 3
:link a:link Sélectionne tous les liens non visités 1
:not( selector ) :not(p) Sélectionne tous les éléments qui ne sont pas un <p> élément 3
:nth-child( n ) p:nth-child(2) Sélectionne tous les <p> élément qui est le deuxième enfant de son parent 3
:nth-last-child( n ) p:nth-last-child(2) Sélectionne tous les <p> élément qui est le deuxième enfant de son parent, à compter du dernier enfant 3
:nth-last-of-type( n ) p:nth-last-of-type(2) Sélectionne tous les <p> élément qui est le second <p> élément de son parent, à compter du dernier enfant 3
:nth-of-type( n ) p:nth-of-type(2) Sélectionne tous les <p> élément qui est le second <p> élément de son parent 3
:only-of-type p:only-of-type Sélectionne tous les <p> élément qui est le seul <p> élément de son parent 3
:only-child p:only-child Sélectionne tous les <p> élément qui est le seul enfant de son parent 3
:optional input:optional Sélectionne des éléments d'entrée sans "required" attribut 3
:out-of-range input:out-of-range Sélectionne des éléments d'entrée avec une valeur en dehors d'une plage spécifiée 3
:read-only input:read-only Sélectionne des éléments d'entrée avec le "readonly" attribut spécifié 3
:read-write input:read-write Sélectionne des éléments d'entrée avec le "readonly" attribut non spécifiée 3
:required input:required Sélectionne des éléments d'entrée avec le "required" attribut spécifié 3
:root :root Sélectionne l'élément racine du document 3
::selection ::selection Sélectionne la partie d'un élément qui est sélectionné par un utilisateur,  
:target #news:target Sélectionne l'élément de #news actif courant (cliqué sur une URL contenant ce nom d'ancrage) 3
:valid input:valid Sélectionne tous les éléments d'entrée avec une valeur valide 3
:visited a:visited Sélectionne tous les liens visités 1