All Css | css3 Selectors

To apply css on elements there are different ways to select an element. The most uses way is class or id of element. But there are many selectors available by which an element can be selected and we can apply css to that element.

List of all css selectors

Selectors	Example	Description
*	*	Select all the elements
.ClassName	.test{ Color:red; }	This is the most common selector used in css in this select all the elements with the class name test.
#idofElelment	#test{ Color:red; }	Element selects with the id test
Element	div{ Color:red; }	Select all the div on the page.
Element , Element,	Div,span{ Color:red; }	Select all the div and span element on the page
Element Element	Div span{ Color:red; }	Select all the span elements inside div elements on the page.
Element> Element	Div > span{ Color:red; }	Select only child span element of div. Means it will only select span element that are direct child of div. as in the example show it will select only first span because it is direct child of div
Element+ Element	Div+span{ Color:red; }	Select all span elements that will come immediately after div element.
[attribute]	[title]{ Color:red; }	Select all the elements with title attribute.
[attribute=value]	[title=abc]{ }	Select all the elements having title=”abc”
[attribute~=value]	[title~=abc]{ }	Select all the elements having word abc in title
[attribute|=value]	[title|=ab]{ }	Select all the elements whose title is starting with ab
:link	a : link{ }	Select all the unvisited link
:visited	a : visited { }	Select all the visited link
:active	a : active { }	Select all the active link
:hover	Div:hover{ }	Select the element on mouseover it
:focus	input:focus{ }	Select the element when element has focus
:first-letter	Span:first-letter{ }	Select the first letter of every span element on page.
:first-line	Span:first- line { }	Select the first line of every span element on page.
:first-child	Span:first- child { }	Select all span elements on page which are the first child of its parent.
:before	Span: before { content:”this is test "; }	Before is use to add some content. It will add “this is test” before every span element on the page.
:after	Span: after { content:”this is test "; }	After is use to add some content. It will add “this is test” after every span element on the page.

These all are the css 1 and css2 selectors. Now following is the list of css3 selectors

Selectors	Example	Description
element1~element2	Div~span	Select all the span elements that will come after the div element.
[attribute^=value]	div[title^="main"]	Select all div elements whose title starts with main .
[attribute$=value]	div[title$="main"]	Select all div elements whose title value ends with main .
[attribute*=value]	div[title*="main"]	Select all div elements whose title contains main.
:first-of-type	Span::first-of-type	Select every span element that is the first child of its parent
:last-of-type	Span: last-of-type	Select every span element that is the last child of its parent
:only-of-type	Span: only-of-type	Select all the span elements that is the only element of its parent. Means if the div have two child span then they will not be selected but if the div has one child span then it will be selected. Means there can be other child elements but the span should be one.
:only-child	Span :only-child	Select every the span element that is the only child of its parent. Means if the parent has only one child and that should be span.
:nth-child(n)	span:nth-child(3)	Select every span element that is the third child of their parent.
:nth-last-child(n)	span :nth-last-child (3)	Select every span element that is the third child of its parent but in this child is count from last child. Mean select the third last child span of its parent.
:nth-of-type(n)	span:nth-of-type(3)	Select every span element that is the third span element of its parent.
:nth-last-of-type(n)	span: last-of-type(3)	Select every span element that is third span element from its parent. But in this counting is start from last child. Means select last third span of its parent.
:last-child	Span: last-child	Select every span element that is the last child of its parent.
:root	:root	Select the root of the document.
:empty	div :empty	Select every div that has no children.
:target	.test:target	Select the current active link element in the element that has test class.
:enabled	Input: enabled	Select all enabled input elements on the page
:disabled	input :disabled	Select all the disabled input elements on the page.
:checked	input :checked	Select all the checked input elements on the page.
:not(selector)	:not(span)	Select all the elements on the page except span.
::selection	::selection	Select the area that is selected by use.