What are Pseudo-classes and Pseudo-elements in CSS?

DANIEL 602 · #1 30-01-2010

I have done C, C++ and Java programming language. Now I have started with CSS. I have done some basic programs in CSS. Now I have stuck with the term Pseudo-classes and Pseudo-elements in CSS. I am not getting anything about the Pseudo terms. So can anyone explain me what are Pseudo-classes and Pseudo-elements in CSS.?? Please provide me more information about the related things with the Pseudo-classes and Pseudo-elements. Hoping for the quick response..!!!

Allan.d · #2 30-01-2010

Pseudo-elements and the Pseudo-classes are used in CSS for the appearance of the forms. The pseudo-elements are used to add special effects in CSS to some selectors. The following is the syntax for the pseudo-elements :

Code:

selector:pseudo-element {property:value;}

You can also use the CSS classes with the pseudo-elements :

Code:

selector.class:pseudo-element {property:value;}

Warner · #3 30-01-2010

There are some elements in the Pseudo-elements with which you can add some effects to the text. The :first-line Pseudo-element is used for the same. If you want to give the special style to the first line of a text, you can give it by using the "first-line" pseudo-element. If you look at the following example, you can understand better :

Code:

p:first-line
{
color:#ff0000;
font-variant:small-caps;
}

In the above example the browser formats the first line of text in a p element according to the style in the "first-line" pseudo-element.

void · #4 30-01-2010

If you want to use multiple Pseudo-elements, you can use it in CSS. Because in CSS, you can combine several pseudo-elements. I have provided you with an example, in which first letter of a paragraph will be blue, in a small-caps. The rest of the first line will be red, and in an xx-large font size. The rest of the paragraph will be the default font size and color. Here is an example for that :

Code:

p:first-letter
{
color:#0000ff;
font-size:small-caps;
}
p:first-line
{
color:#ff0000;
font-variant:xx-large;
}

opaper · #5 30-01-2010

I am explaining you the two Pseudo-element. The ":before" pseudo-element and the :after Pseudo-element. The ":before" pseudo-element can be used to insert some content before the content of an element. While the ":after" pseudo-element can be used to insert some content after the content of an element. The following are the examples of both the pseudo-elements :

Code:

h3:before
{
content:url(thumup.gif);
}

The above example inserts an image before each <h3> element.
And the following example will insert an image after each <h2> element :

Code:

h2:after
{
content:url(ohmy.gif);
}

Solitario · #6 30-01-2010

I think that you should got the concept of Pseudo-elements, so I thought that providing some information about the Pseudo-classes will be useful for you..!! The syntax for the pseudo-classes in CSS is :

Code:

selector:pseudo-class {property:value;}

With the pseudo-classes, you can also use the CSS classes :

Code:

selector.class:pseudo-class {property:value;}

Hope that you might have got the term Pseudo-classes used in CSS.!!

MELTRONICS · #7 30-01-2010

You can also combine the CSS Classes with the pseudo-classes, similarly as the pseudo-elements that combines with the CSS Classes. The following example explains the same :

Code:

a.blue:visited {color:#0000ff;}

<a class="blue" href="css_trial.asp">CSS Syntax</a>

After using this coding, if you visit the above link, it will display it in Blue color.

Deabelos · #8 30-01-2010

You can also match the specified element by using the pseudo-class. The The :first-child pseudo-class matches a specified element that is the first child of another element. But before using the :first-child to work in Internet Explorer, you will have to declare a <!DOCTYPE>, otherwise it will not work. In the example that I have given, the selector matches any <p> element that is the first child of any element :

HTML Code:

<html>
<head>
<style type="text/css">
p:first-child
{
color:red;
}
</style>
</head>

<body>
<p>I am very intelligent.</p>
<p>I am very intelligent.</p>
</body>
</html>

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

Similar Threads for: "What are Pseudo-classes and Pseudo-elements in CSS?"
Thread	Thread Starter	Forum	Replies	Last Post
Is anyone know what is pseudo code?	Truster	Software Development	5	03-02-2010 01:44 PM
Teredo Tunneling Pseudo-Interface and VPN Client	davie	Hardware Peripherals	4	25-01-2009 08:46 AM
Teredo Tunneling Pseudo-Interface	JohnB	Vista Hardware Devices	1	21-12-2007 03:04 PM
teredo tunneling pseudo interface	Giovanni	Vista Hardware Devices	1	03-12-2007 08:11 AM
Teredo Tunneling Pseudo-Interface?	drahnier	Windows Vista Network	0	01-03-2007 03:02 PM

What are Pseudo-classes and Pseudo-elements in CSS?

Software Development