CSS Pseudo Classes tutorials and examples

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(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 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 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 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 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(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(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 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 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 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 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 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 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

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 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