CSS Selectors

In this artical we define differntes types of selector see as above-

What is Selector?

Selector-CSS type selectors match elements by node name. Selector for a particular node name selects all elements of that type — that is, with that node name — in the document. andwe can define a selector is element which on we apply css propeties. like example

Syntex

<style type="text/css">>
Selector element { Define properties }
</style>

Example-

<style type="text/css">>
p{
background-color:blue;color:white;
}
</style>

In this tutorial we define selector like in example see.

Selector	Description	Example
div	Define div and write css.Select all <div> element	div { padding:3px; }
p	Define p element and write css.Select all <p> element	p { padding:3px; }
h1	Define h1 element and write css.Select all <h1> element.Basically we use heading style 1,h2,h3,h4,h5,h6.Maintain this order like- h1>h2>h3>h4>h5>h6 In this h1 is very large size of font and text and h6 is very small.	h1 { color:red; }
.class	Define class with .(dot)symbol and apply css class and access class name with .(ClassName)	.name { padding:3px; color:blue; }
.Id	Define class with # symbol and apply css class and access class name with #(ClassName)	#name { padding:3px; color:blue; }
*	* (Use this symbol select all element only use * effected all element)	.name { padding:3px; color:blue; }
div, p	Selects all <div> elements and all <p> elements.Apply css propert effected all elements of both<div>& <p>	div,p { padding:3px; color:blue; }
div p	Selects all elements inside <div> elements.Apply css property effected all elements of both <div>& <p>	div p { padding:3px; color:blue; }
div > p	Selects all <p> elements where the parent is a <div> element where effected css properties	div > p { padding:3px; color:blue; }
div + p	Selects all <p> elements that are placed immediately after <div> elements. Whereis effected css properties	div > p { padding:3px; color:blue; }
[title~=fruit]	Selects all elements with a title attribute containing the word "fruit" where apply css properties which is declared	[title~=fruit]{ padding:3px; color:blue; }
p~ul	Selects every <ul> element that are preceded by a <p> element.	p~ul{ padding:3px; color:blue; }
a[href^="https"]	Selects every <a> element whose href attribute value begins with "https"	a[href^="https"]{ padding:3px; color:blue; }
a[href$=".pdf"]	Selects every <a> element whose href attribute value ends with ".pdf"	a[href$=".pdf"]{ padding:3px; color:blue; }
a:active	Selects the active link of a tag and easly apply css property	a:active{ padding:3px; color:blue; }
p::after	Insert something after the content of each <p> element and we can easly write css property	p::after{ padding:3px; color:blue; }
p::before	Insert something before the content of each <p> element	p::before{ padding:3px; color:blue; }
input:checked	Selects every checked <input> element	input:checked{ padding:3px; color:blue; }
input:disabled	Selects every disabled <input> element	input:disabled{ padding:3px; color:blue; }
p:empty	Selects every <p> element that has no children (including text nodes)	p:empty{ padding:3px; color:blue; }
input:enabled	Selects every enabled <input> element	input:enabled{ padding:3px; color:blue; }
p:first-child	Selects every <p> element that is the first child of its parent	p:first-child{ padding:3px; color:blue; }
p::first-letter	Selects the first letter of every <p> element.You can apply css properties and effected only first letter of every <p>elements.	p::first-letter{ padding:3px; color:blue; }
p::first-letter	Selects every <p> element that is the first child of its parent	p:first-child{ padding:3px; color:blue; }
p::first-line	Selects the first line of every <p> element.You can appy css property and effected on <p>tag first line.	p::first-line{ padding:3px; color:blue; }
p:last-child	Selects every <p> element that is the last child of its parent.You can appy css property and effected.	p:last-child{ padding:3px; color:blue; }
a:hover	Selects links on mouse over.You can give css property easly	a:hover{ padding:3px; color:blue; }
input:focus	Selects the input element which has focus.You can apply css style easly want focus then.	input:focus{ padding:3px; color:blue; }
input:invalid	Selects all input elements with an invalid value.	input:invalid{ padding:3px; color:blue; }
a:link	Selects all unvisited links.	a:link{ padding:3px; color:blue; }
:not(p)	Selects every element that is not include <p> element	:not(p){ padding:3px; color:blue; }