CSS Pseudo Classes tutorials and examples

CSS :nth-last-of-type

CSS :nth-last-of-type(an+b) pseudo class represent all sibling elements of same type whose sibling position is obtained by putting n=0,1,2,3… and so on counting from last. read more

CSS :nth-last-child

CSS :nth-last-child(an+b) pseudo class represent all sibling elements whose sibling position is obtained by putting n=0,1,2,3… and so on from last. Note that sibling can read more

CSS :not – negation pseudo-class

Css negation pseudo-class, :not(X) can be used on any simple selector. It will match element which are not selected by selector X. Example – css read more

CSS :empty – define style for empty element

Css :empty pseudo-class represents an element that has no children at all. Few cases <p></p> is considered empty <div>hello</div> is not considered empty Example – read more

CSS :only-of-type – define style of only child a type

Css :only-of-type pseudo class represents an element that has a parent element and whose parent element has no other element children of same type. Example read more

CSS :only-child – define style if element if only child

Css :only-child pseudo class represents an element that has a parent element and whose parent element has no other element children. Example – css :only-child read more

CSS :nth-of-type

CSS :nth-of-type(an+b) pseudo class represent all sibling elements of same type whose sibling position (starting from 1) is obtained by putting n=0,1,2,3… and so on. read more

Css :nth-child

CSS :nth-child(an+b) pseudo class represent all sibling elements whose sibling position (starting from 1) is obtained by putting n=0,1,2,3… and so on. Note that sibling read more

Css :last-of-type selector – last child element of type

Css :last-of-type pseudo class apply to an element if it is last sibling among its parent’s direct child elements of same type. Here is an read more

Css :last-child selector – last child element

Css :last-child pseudo class apply to an element if it is last sibling in all direct child elements of its parent. It can be used read more

Css :first-of-type selector – first child element of type

Css :first-of-type pseudo class apply to an element if it is first sibling among its parent’s direct child elements of same type. Here is an read more

Css :first-child selector – first child element

Css :first-child pseudo class apply to an element if it is first sibling in all direct child elements of its parent. Here are some examples. read more

Css :nth-child vs :nth-of-type

Css :nth-child and :nth-of-type pseudo classes look very similar initially. But these are slightly different. Few points to explain the difference: :nth-child considers all sibling read more

CSS – :nth child, :nth-last-child, :first-child, :last-child pseudo classes examples

CSS nth-child, nth-last-child, first-child, last-child pseudo class selectors (:nth-child(), :nth-last-child(), :first-child, :last-child) are pretty powerful css selectors to create very useful styles in html. Here read more

How to debug :hover in Chrome

At times we need to force hover state when we are debugging CSS in style inspector in Chrome developers tools. Chrome supports forcing a certain read more

CSS menu using css pseudo element :hover

CSS hover pseudo element can be used to create simple menu without using any Javascript. This is achieved by making menu children visible when parent read more