Css selectors reference

CSS selectors are the heart and soul of CSS.a selector is a pattern.it's the part of a css rule that matches a set of elements in a html or xml documnet.

css selectors are divided in many categories :-

  • universal selector:- matches any element type.
  • element type selector:- matches elements with the specified element type name.
  • id selector :-selects elements with a specific id attribute value.
  • class selector :-selects elements with a specific class attribute value.
  • attribute selector:- selects elements based on attribute values.
  • adjacent sibling selectors (a+b) :-selects an elements that's an adjacent sibling to a specified element.
  • general sibling selectors(a~b):-selects an elements that's sibling to a specific element
  • child selectors(A>B) :-selects an element that's the immediate child of a specified ;element.
  • descendant selectors a b :-matches an element that's a descendant of a specified element.
  • pseudo-elements
  • pseudo-classes

CSS selectors - css2 selectors - css3 selectors

selectordefine itdescriptioncss version
**selects all elements.2
#id#idNameselects all elements with id='inname .1
.class.classnameselects all elements with class="className" .1
elementimg (element)

selects all <img> elements.

1
element,elementdiv,img,pselects all <div> <img> or <p> elements.1
element  elementdiv img

selects all <img> elements inside <div>

 elements.

1
element>elementdiv>img

selects all <img> element where the <div>

 element is parent.

2
element+elementdiv+img

selects all <img> elements that immediately

after the <div> elements.

2
element~elementimg~p

selects every <p> element that are preceded

by a <img>element.

3

CSS anchor link related selectors

selectordefine itdescriptioncss version
:linka:linkselects all unvisited links.1
:visiteda:visitedselects all visited links.1
:activea:activeselect  active link1
:hovea:hoverselects  links when mouse pointer over it1
:focusinput:focusselects input element which get focus.2

CSS Form related selectors

selectordefine itdescriptioncss version
:emptyp:emptyselects every <p> element that has no childern.3
:enabledinput:enabledselects every enabled <input>   element.3
:disabledinput:disabledselects every disabled <input> element.3
:checkedinput:checkedselects every checked <p>  element.3
::selection::selection

selects the portion of an element that is

selected by a user

3

CSS Attribute selectors

selectordefine itdescriptioncss version
[attribute][href]selects all elements with href attribute.2
[attribute='value'][href="http://."]selects all elements with href="http://." .2
[attribute~='value'][title~='name']

selects all elements whith title attribute

combine word 'name'.

2
[attribute|='value'][lang|=c]

selects all elements with lang attribute value

start with 'c'.

2
[attribute^='value']a[href^=http:]

selects <a> element whose href attribute value begin with 'http:'

3
[attribute$='value']a[href$='.com']

selects <a> element whose href attribute value end with '.com'

3
[attribute*='value']a[href*='.com']

slects <a> element whose href attribute value contains the substring '.com'

3

CSS root element selector

selectordefine itdescriptioncss version
:rootp:rootselects  the document root element.3

CSS advanced selectors

selectordefine itdescriptioncss version
:first-letterp:first-letterselects the first letter of every <p> element.1
:first-linep:first-lineselects the first line of every <p> element.1
:first-childp:first-child

selects  <p>element that is the first child of its parent.

2
:beforep:before

insert content before the content of every <p> element.

2
:afterp:after

insert content after the content of every <p> element.

2
:first-of-typep:first-of-type

selects every <p> that is the first element of its parent.

3
:last-of-typep:last-of-type

selects every <p> elements that is the last element of its parent.

3
:only-of-typep:only-of-type

selects every <p> elements that is the only <p> element of its parent.

3
:only-childp:only-child

selects every  <p> elements that is the only child of its parent.

3
:nth-child(n)p:nth-child(1)

selects every <p> element that is the first child of its parent.

3
:nth-last-child(n)p:nth-last-child(1)

selects every <p> element that is the first child of its parent, count the child from last position

3
:nth-of-type(n)p:nth-of-type(1)

selected every <p> element that is the first <p> element of its parent.

3
:nth-last-of-type(n)p:nth-last-of-type(1)

selects every <p> elements that is the first <p> elements of its parent. count the child

      from last position.

3
:last-childp:last-child

selects every <p> element that is the last child of its parent.

3