Search within TutorialsPark

CSS Pseudo Class


Apply CSS styles based on user Interaction with the document using pseudo-classes.


CSS Pseudo Classes

1. With CSS(CSS3) pseudo-class selectors you can apply CSS styles to elements based on their position within the Document or interactive state.

CSS Pseudo-Class Selectors

Links

:link

:active

:visited

:hover

Interactive

:focus

:hover

:active

Others

:target

:empty

:root

:not

:lang(C)

Structural

:first-child

:first-of-type

:nth-child(N)

:nth-last-child(N)

:nth-of-type(N)

:nth-last-of-type(N)

:last-child

:last-of-type

:only-child

:only-of-type


CSS Pseudo Class Selector - Links

CSS Pseudo Class:Links

1. To style links depending upon how an user interacts with that link, use :link and :visited pseudo-classes .

:link To select and style the appearance of link that has not yet been visited by the user.

:visited To select and style the appearance of the link previously visited by the user, based on web browser's history.

Example:CSS Pseudo Class :links and :visited

Give it a TRY! » Note: The :hover and :active are called as dynamic pseudo classes, as they are functional only on user interaction.


CSS Pseudo Class Selector - Dynamic/Links

CSS Pseudo Selector :hover

1. CSS Pseudo Selector :hover selects and styles any element over which the user's mouse pointer hovers.

2. Browser will apply styles when the pointer hovers over and removes styles when the pointer moves out of the element on screen.

Example: CSS Pseudo Selector :hover

Give it a TRY! » Note:In above Example, CSS styles are applied to links which over which the mouse pointer moves onscreen.


CSS Pseudo Selector :active

1. CSS Pseudo Selector :active selects and styles element for a the period when the user clicks on them.

2. The CSS styles are applies only for the time period when the element was activated, which is usually a split second, hence it may even go un-noticed.

Example: CSS Pseudo Selector :active

Give it a TRY! » Note:Interpretation of this selector depends upon the browser.


CSS Pseudo Class :focus

1. CSS pseudo class :focus functions similar to :hover

2. But :hover is activated when a mouse pointer moves over a link,and :focus is activated when a user performs an action to show attention to a webpage element, mainly by clicking or tabbing.

3. Usually applied to elements that require the user to focus, such as form input fields etc.

Example:CSS Pseudo Class :focus

Give it a TRY! » Note: :focus pseudo class is usually combined with :active and :hover.


CSS Pseudo Class Selector - Children

CSS Pseudo Class :first-child

1. Use this Selector to apply CSS styles to first of however many children an element may contain.

2. Eg: li:first-child will select the first child of however many children the <li> element may have.

Example: CSS pseudo class :first-child

Give it a TRY! » Note: It can be used to apply a seperate style to first child of any element.


CSS Pseudo Class :last-child

1. Use this Selector to apply CSS styles to last child of however many children a element may contain.

3. Eg: li:last-child will apply CSS style to last child of however many children the parent element may have.

Example: CSS Pseudo Class :last-child

Give it a TRY! » Note: It can be used to give a seperate style to last child of any element.


CSS Pseudo Class :only-child

1. CSS Pseudo Class :only-child selects and styles elements that are the only child of their parents and has no siblings.

2. Eg: li:only-child will select list elements that has only one child element.

Example: CSS Pseudo Class :only-child

Give it a TRY! » Note: The styles will be applied to Element which is the only-child and has no sibling.


CSS Pseudo Class :only-of-type

1. CSS Pseudo Class :only-of-type selects and styles elements that are the only child of a type of their parents.

2. The element may have sibling but none of them should be of same type as itself.

3. Eg: p:only-of-type will select <p> element which is of unique type among its siblings.

Example: CSS Pseudo Class :only-of-type

Give it a TRY! » Note: In above Demo element <p> is unique sibling only within <div>,hence matched.


CSS Pseudo Class Selector - nth Child

CSS Pseudo Class :nth-child(n)

1. CSS Pseudo Class :nth-child selects and styles elements that are the nth child of their parents.

2. Eg: li:nth-child(3) will select third child element within the list, counting from top-bottom.

Example: CSS Pseudo Class :nth-child(n)

Give it a TRY! » Note: The value in brackets "n" can be a number, keyword or even a function(formula).


CSS Pseudo Class :nth-last-child(n)

1. CSS Pseudo Class :nth-last-child selects and styles element which is the nth child of its parent, counting from the last child element..

2. Eg: li:nth-last-child(2) will select second item form the list, counting form bottom to top.

Example: CSS Pseudo Class :nth-last-child(n)

Give it a TRY! » Note: The value in brackets "n" can be a number, keyword or even a function(formula).


CSS Pseudo Class :nth-of-type(n)

1. CSS Pseudo Class :nth-fo-type(n) selects and styles elements that are the nth-child of a particular type within their parent element

3. Eg: p:nth-of-type(n) will select <p> element at nth position within its parents.

Example: CSS Pseudo Class :nth-of-type(n)

Give it a TRY! » Note: The value in brackets "n" can be a number, keyword or even a function(formula).


CSS Pseudo Class :nth-last-of-type(n)

1. CSS Pseudo Class :nth-last-of-type(n) selects and styles element that is at nth-last position of a particular type within its parent element

2. Eg: p:nth-last-of-type(n) will select <p> element at nth position within its parents, counting from last child.

Example: CSS Pseudo Class :nth-last-of-type(n)

Give it a TRY! » Note: The value in brackets "n" can be a number, keyword or even a function(formula).


CSS Pseudo Class Selector - Others

CSS Pseudo Selector :not(<selector>)

1. CSS Pseudo Selector :not(<selector>) selects and styles every element that is not the match for the selection. i.e inversion of the selection

2. p:not(.demo) will select and style every <p> element that does not contain the class "demo".

Example: CSS Pseudo Selector :not(<selector>)

Give it a TRY! » Note:Use this to target elements that do not match the selector condition.


CSS Pseudo Selector :lang

1. CSS Pseudo Selector :lang selects and styles elements based on their language specified by their language property.

2. Eg: p:lang(fr) selects elements with attribute lang="fr".

CSS Pseudo Selector :lang

Give it a TRY! » Note:W3C recommends to use language codes from RFC 3066 to ensure standard.


CSS Pseudo Selector :empty

1. CSS Pseudo Selector :empty selects and styles element that is completely elements.

2. Empty in a very strict sense,i.e no child , text or even a space within the opening and closing tags of an element.

Example: CSS Pseudo Selector :empty

Give it a TRY! » Note:It is usually used to with tables to style empty cells


CSS Pseudo Selector :target

1. CSS Pseudo Selector :target selects and styles elements that can be accessed using a link that ends with a URL fragment i.e a hash sign(#) followed by an achor-name ot ID.

2. The styles will be applied only when the page is accessed using such a URL fragment( internally or externally). Or else its ignored

3. For example, :target will style the elements which are the target of URL fragments

Example: CSS Pseudo Selector :target

Give it a TRY! » Note: :target pseudo class matches element that the URL fragment link to.


CSS Pseudo Selector :root

1. CSS Pseudo Selector :root selects the root element of the document, and for HTML document it is always the <html> element.

2. Its mainly useful when used with XML document, within its stylesheet.

Example: CSS Pseudo Class :root

Give it a TRY! » Note:Use it to assign higher specificity to HTML element, to set property that cannot be altered.


All CSS Attribute Selectors

Units Names Descriptions
E[attribute] Attribute Selects elements if it has the specified attribute
E[attribute="value"] Exact Value Selects elements if the Element has specified attribute equal to the exact value.
E[attribute~="value"] Spaced List Selects elements if the Element has specified attribute equal to exact value within space-separated list.
E[attribute*="value"] Contains Selects elements if the Element has specified value equal to exact value appearing anywhere.
E[attribute^="value"] Begins with Selects elements if the Element has specified attribute equal to the exact value only at the Beginning of the string.
E[attribute|="value"] Hyphenated List Selects elements if the Element has specified attribute equal to exact value within hyphen-separated list.
E[attribute$="value"] Ends with Selects elements if the Element has specified attribute equal to the exact value at the end of string.