pseudo-class in css with examples
Posted on April 1, 2011 | No Comments
CSS pseudo-classes are used to add special effects to some selectors.
Syntax
The syntax of pseudo-classes:
selector:pseudo-class {property:value;}
CSS classes can also be used with pseudo-classes:
selector.class:pseudo-class {property:value;}
Pseudo-classes can be combined with CSS classes:
a.red:visited {color:#FF0000;} <a class="red" href="css_syntax.asp">CSS Syntax</a>
CSS – The :first-child Pseudo-class
The :first-child pseudo-class matches a specified element that is the first child of another element.
Note: For :first-child to work in IE a < !DOCTYPE> must be declared.
Match the first
element
In the following example, the selector matches any
element that is the first child of any element:
<html> <head> <style type="text/css"> p:first-child { color:blue; } </style> </head> <body> <p>I am a strong man.</p> <p>I am a strong man.</p> </body> </html>
Match the first element in all
elements
In the following example, the selector matches the first element in all
elements:
<html> <head> <style type="text/css"> p > i:first-child { font-weight:bold; } </style> </head> <body> <p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p> <p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p> </body> </html>
Pseudo-elements
:after – Adds content after an element
:before – Adds content before an element
:first-letter – Adds a style to the first character of a text
:first-line – Adds a style to the first line of a text
CSS3 Pseudo-classes
CSS3 provides many more pseudo-classes than CSS2. Though browser support for them is varied, it is improving.
:nth-child(N)
matches elements on the basis of their positions within a parent element’s list of child elements
:nth-last-child(N)
matches elements on the basis of their positions within a parent element’s list of child elements
:nth-of-type(N)
matches elements on the basis of their positions within a parent element’s list of child elements of the same type
:nth-last-of-type(N)
matches elements on the basis of their positions within a parent element’s list of child elements of the same type
Understanding :nth-child Pseudo-class Expressions
:last-child
matches an element that’s the last child element of its parent element
:first-of-type
matches the first child element of the specified element type
:last-of-type
matches the last child element of the specified element type
:only-child
matches an element if it’s the only child element of its parent
:only-of-type
matches an element that’s the only child element of its type
:root
matches the element that’s the root element of the document
:empty
matches elements that have no children
:target
matches an element that’s the target of a fragment identifier in the document’s URI
:enabled
matches user interface elements that are enabled
:disabled
matches user interface elements that are disabled
:checked Pseudo-class
matches elements like checkboxes or radio buttons that are checked
:not(S)
matches elements that aren’t matched by the specified selector
Comments
Leave a Reply
You must be logged in to post a comment.