CSS selectors tutorials and examples

The CSS type selector matches element by node name (e.g. div, h1. h2). This can be used to specify CSS style based on element type. read more

The universal selector (*), matches the name of any element type. It matches any single element in the document tree. Some ways it can be read more

CSS attribute selector can be used to select DOM elements based on attribute presence of their values. We can use attribute selectors in multiple ways. read more

CSS attribute selector can be used to select DOM elements based on matching substring of attribute values. We can use attribute substring selectors in multiple read more

The CSS class selector matches element having a specific class name as one of the classes in attribute class. This can be used to specify read more

Sometime we need to define css style for elements having two or multiple clasess (all of them). It can defined by using syntax .class1.class2 (or read more

The CSS id selector matches element having a specific id attribute This can be used to specify CSS style based on element id. Note that read more

CSS :link pseudo-class applies to links that have not yet been visited. Example – use :link to apply style to unvisited links This example displays read more

CSS :visited pseudo-class applies once the link has been visited by the user Example – use :visited to apply style to visited links This example read more

The :hover pseudo-class applies while the user takes mouse on an element. Note that user may not click on it. Using :hover one can change read more

The :active pseudo-class applies while an element is being activated (e.g. clicked) by the user. For example, between the times the user presses the mouse read more

The :focus pseudo-class applies while an element has the focus. There can be various ways to get focus on an element. Some of these are: read more

The :target pseudo-class applies to an element which has id matching with fragment identifier (string after hash). e.g. in url http://example.com/html/top.html#section1 section1 is fragment/anchor identifier. read more

The :lang pseudo-class can used to select elements based on language. Example – css :lang This example show french language content in different color.

The :enabled pseudo-class represents elements (input, textarea, button, etc.) that are in an enabled state. Such elements have a corresponding disabled state also. Similarly :disabled read more

The :checked pseudo-class represents elements (checkbox and radio) that are in an selected (checked) state. Example – css :checked checkbox element This example highlights span read more

The :root pseudo-class represents an element that is the root of the document. In case of HTML, it is html element. Example – css :root 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 :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 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-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 :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 :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 :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 :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 :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 :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 :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 :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 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

The ::first-line pseudo-element describes the contents of the first formatted line of an element. Example – ::first-line

The ::first-letter pseudo-element represents the first letter of an element, if it is not preceded by any other content (img, or inline tables). If an read more

CSS pseudo element ::before and ::after (CSS 2 syntax :before and :after) can be used to place some content before or after an element. Most read more

CSS input and textarea ::placeholder pseudo element can be used to add a placeholder text in input element. The text is set using input element read more

CSS direct child can be specified using A > B and any descendant can be specified using A B. This should be used with care read more

Sometime we need to define css style for adjacent sibling elements. It can be defined by using syntax E1 + E2. It will match when read more

Sometimes we need to define css style for general sibling elements. These may not be adjacent but should have same container parent. It can be read more

When two selectors have same style, then one with higher specificity wins. In case they have same specificity, the one which come later, wins. Specificity read more