Relax Breath of Solution.Community tech blog of Sameera Thilakasiri - Consultant UI, UX, RWD Specialist/ Interactive Designer

Just I wanted.. Do you?…

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


Author
Sameera Thilakasiri By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.

Comments

Leave a Reply

You must be logged in to post a comment.