Posts in current category

CSS selector


May 05, 2021 09:00 CSS Reference Manual


Table of contents


CSS Selector


The CSS selector is used to select the pattern of the style of the element you want.

The "CSS" column represents the property definition in the CSS version (CSS1, CSS2, or CSS3).

Selector Example Example description Css
. class .intro Select all the elements of class-"intro" 1
# Id #firstname Select all the elements of id"firstname" 1
* * Select all elements 2
element p Select all of the elements 1
element,element div,p Select all the elements and the elements 1
element element div p Select all the elements within the element 1
element > element div>p Select all parents to be the slt;div;element of the element 2
element + element div+p Select all the elements immediately after the .lt;div> 2
[ attribute ] [target] Select all elements with the target property 2
[ attribute = value ] [target=-blank] Select all the elements that use target"-blank" 2
[ attribute ~= value ] [title~=flower] Select the title property to contain all elements of the word "flower" 2
[ attribute |= language ] [lang|=en] Select a lang property for all elements that begin with en 2
:link a:link Select all unresoled links 1
:visited a:visited Select all the links you've visited 1
:active a:active Select the active link 1
:hover a:hover Select the mouse over the link 1
:focus input:focus Select the input element with focus 2
:first-letter p:first-letter Select the first letter of each of the elements 1
:first-line p:first-line Select the first line of each of the elements 1
:first-child p:first-child Specifies the style only if the element is the first child of its parent. 2
:before p:before Insert content before each of the elements 2
:after p:after Insert the content after each of the elements 2
:lang( language ) p:lang(it) Select the starting value of a lang property, all the elements of "it" 2
element1 ~ element2 p~ul Select each of the elements after the element 3
[ attribute ^= value ] a[src^="https"] Select the element that begins with "https" for the value of each src property 3
[ attribute $= value ] a[src$=".pdf"] Select the value of each src property to end .pdf "Src" 3
[ attribute *= value ] a[src*="W3Cschool"] Selecting the value of each src property contains elements of the substring "W3Cschool" 3
:first-of-type p:first-of-type Selecting each of the elements is the first of its parents 3
:last-of-type p:last-of-type Select each of the elementes, which is the last of its parents, and the element 3
:only-of-type p:only-of-type Select each of the elements that is the only one of its parents 3
:only-child p:only-child Select each of the elementes to be the only child element of its parent 3
:nth-child( n ) p:nth-child(2) Selecting each element is the second child element of its parent 3
:nth-last-child( n ) p:nth-last-child(2) Each element selected is the second child element of its parent, counting from the last child 3
:nth-of-type( n ) p:nth-of-type(2) Selecting each of the elements is the second element of its parent 3
:nth-last-of-type( n ) p:nth-last-of-type(2) Selecting each of the elements is the second and lt;p> element of its parent, counting from the last child 3
:last-child p:last-child Selecting each element is the last child of its parent. 3
:root :root Select the root element of the document 3
:empty p:empty Select each element (including text nodes) that does not have any children 3
:target #news:target Select the currently #news element (the click URL that contains the anchor name) 3
:enabled input:enabled Select each enabled input element 3
:disabled input:disabled Select each disabled input element 3
:checked input:checked Select each selected input element 3
:not( selector ) :not(p) Select each element that is not a .lt;p.gt. element 3
::selection ::selection The part of the matching element that is selected by the user or is highlighted 3
:out-of-range :out-of-range The matching value is outside the specified interval 3
:in-range :in-range The element of the matching value that is within the specified interval 3
:read-write :read-write Used to match readable and writeable elements 3
:read-only :read-only Used to match the elements that set the readonly (read-only) property 3
:optional :optional Used to match optional input elements 3
:required :required Used to match elements that have the "required" property set 3
:valid :valid Used to match elements with input values that are legal 3
:invalid :invalid Used to match elements with input values that are illegal 3