selector:pseudo-class { property: value; }.
A typical example of a selector and pseudo-class would be the anchor element
<a>, used in CSS.( To Learn more on this Visit Links).
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.
Example 1 : Match the first <p> element
<html>
<head>
<style type="text/css">
p:first-child
{
color:blue;
}
</style>
</head>
<body>
<p>This is a Text.</p>
<p>This is another Text.</p>
</body>
</html>
it will look like this on your Browser
This is a Text
This is another Text
In the above example, the selector matches any <p> element that is the first child of any element
Example 2: match the first <i> element in all <p> element
<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>
it will look like this on your browser
I am a strong man. I am a strong man.
I am a strong man. I am a strong man.
Using the :focus Pseudo-class
Specify the color of an input field that gets focus:
input:focus
{
color:yellow;
}
It will look like this on your browser
Working with Pseudo-Elements
These are some examples of Pseudo-Classes and how they can be used.
- : 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.
Example 3 : First-line
p:first-line
{
color:#ff0000;
font-variant:small-caps;
}
It will look like this on your Browser
This is a text plus can you see the first line
how it has been changed using the pseudo class "first-line".
notice that it only affect that part of the text it has been
instructed to affect.
Example 4: First-letter
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
It will look like this on your Browser
Can you see that this pseudo class only affected the first letter.
Example 5: Before & after
h1:before
{
content:url('logo.png');
}
h2:after
{
content:url('logo.png');
}
It will look like this on your Browser
The image came before this heading
The image came after this heading
There are other Pseudo-Classes, so you can research about them to learn some more.
Back
Main: CSS Programming
Previous Lesson: CSS Advanced: Display
Next Lesson: CSS Advanced : Image Opacity
