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 <p> elements 										1
element,element 	div,p 			Selects all <div> elements and all <p> elements 							1
element element 	div p 			Selects all <p> elements inside <div> elements 								1
element>element 	div>p 			Selects all <p> elements where the parent is a <div> element 						2
element+element 	div+p 			Selects all <p> elements that are placed immediately after <div> elements 				2
[attribute] 		[target] 		Selects all elements with a target attribute 								2
[attribute=value] 	[target=_blank] 	Selects all elements with target="_blank" 								2
[attribute~=value] 	[title~=flower] 	Selects all elements with a title attribute containing the word "flower" 				2
[attribute|=value] 	[lang|=en] 		Selects all elements with a lang attribute value starting with "en" 					2
:link 			a:link 			Selects all unvisited links 										1
:visited 		a:visited 		Selects all visited links 										1
:active 		a:active 		Selects the active link 										1
:hover 			a:hover 		Selects links on mouse over 										1
:focus 			input:focus 		Selects the input element which has focus 								2
:first-letter 		p:first-letter 		Selects the first letter of every <p> element 								1
:first-line 		p:first-line 		Selects the first line of every <p> element 								1
:first-child 		p:first-child 		Selects every <p> element that is the first child of its parent 					2
:before 		p:before 		Insert content before  the content of every <p> element 						2
:after 			p:after 		Insert content after every <p> element 									2
:lang(language) 	p:lang(it) 		Selects every <p> element with a lang attribute equal to "it" (Italian) 				2
element1~element2 	p~ul 			Selects every <ul> element that are preceded by a <p> element 						3
[attribute^=value] 	a[src^="https"] 	Selects every <a> element whose src attribute value begins with "https" 				3
[attribute$=value] 	a[src$=".pdf"] 		Selects every <a> element whose src attribute value ends with ".pdf" 					3
[attribute*=value] 	a[src*="w3schools"] 	Selects every <a> element whose src attribute value contains the substring "w3schools" 			3
:first-of-type 		p:first-of-type 	Selects every <p> element that is the first <p> element of its parent 					3
:last-of-type 		p:last-of-type 		Selects every <p> element that is the last <p> element of its parent 					3
:only-of-type 		p:only-of-type 		Selects every <p> element that is the only <p> element of its parent 					3
:only-child 		p:only-child 		Selects every <p> element that is the only child of its parent 						3
:nth-child(n) 		p:nth-child(2) 		Selects every <p> element that is the second child of its parent 					3
:nth-last-child(n) 	p:nth-last-child(2) 	Selects every <p> 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 <p> element that is the second <p> element of its parent 					3
:nth-last-of-type(n) 	p:nth-last-of-type(2) 	Selects every <p> element that is the second <p> element of its parent, counting from the last child 	3
:last-child 		p:last-child 		Selects every <p> element that is the last child of its parent 						3
:root 			:root 			Selects the document?s root element 									3
:empty 			p:empty 		Selects every <p> 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 <input> element 									3
:disabled 		input:disabled 		Selects every disabled <input> element 									3
:checked 		input:checked 		Selects every checked <input> element 									3
:not(selector) 		:not(p) 		Selects every element that is not a <p> element 							3
::selection 		::selection 		Selects the portion of an element that is selected by a user 						3