CSS Selectors ============= Selectors are pointers or members of collections of pointers of objects of html document. Selectors are usabel to define styles of many objects of html document. Collections of of pointers of objects of html document are an old thing of development of HTML DOM. So CSS use HTML DOM. CSS is an overhead of old things. ... Who need that ? Selector Example Example description CSS version ------------------------------------------------------------------------------------------------------------------------------------------------------------------- .class .intro Selects all elements with class="intro" 1 #id #firstname Selects the element with id="firstname" 1 * * Selects all elements 2 element p Selects all
elements 1 element,element div,p Selects all
elements 1 element element div p Selects all
elements inside
elements where the parent is a
elements that are placed immediately after
element 1 :first-line p:first-line Selects the first line of every
element 1 :first-child p:first-child Selects every
element that is the first child of its parent 2 :before p:before Insert content before the content of every
element 2 :after p:after Insert content after every
element 2 :lang(language) p:lang(it) Selects every
element with a lang attribute equal to "it" (Italian) 2 element1~element2 p~ul Selects every
element 3
[attribute^=value] a[src^="https"] Selects every element whose src attribute value begins with "https" 3
[attribute$=value] a[src$=".pdf"] Selects every element whose src attribute value ends with ".pdf" 3
[attribute*=value] a[src*="w3schools"] Selects every element whose src attribute value contains the substring "w3schools" 3
:first-of-type p:first-of-type Selects every element that is the first element of its parent 3
:last-of-type p:last-of-type Selects every element that is the last element of its parent 3
:only-of-type p:only-of-type Selects every element that is the only element of its parent 3
:only-child p:only-child Selects every element that is the only child of its parent 3
:nth-child(n) p:nth-child(2) Selects every element that is the second child of its parent 3
:nth-last-child(n) p:nth-last-child(2) Selects every element that is the second child of its parent, counting from the last child 3
:nth-of-type(n) p:nth-of-type(2) Selects every element that is the second element of its parent 3
:nth-last-of-type(n) p:nth-last-of-type(2) Selects every element that is the second element of its parent, counting from the last child 3
:last-child p:last-child Selects every element that is the last child of its parent 3
:root :root Selects the document?s root element 3
:empty p:empty Selects every element that has no children (including text nodes) 3
:target #news:target Selects the current active #news element (clicked on a URL containing that anchor name) 3
:enabled input:enabled Selects every enabled element 3
:disabled input:disabled Selects every disabled element 3
:checked input:checked Selects every checked element 3
:not(selector) :not(p) Selects every element that is not a element 3
::selection ::selection Selects the portion of an element that is selected by a user 3