CSS pseudo-classes and elements
CSS pseudo-classes and elements
by Sagar Awasthi on Oct.22, 2009, under CSS pseudo-classes and elements
CSS pseudo-classes and CSS pseudo-elements are used to add special effects to some selectors.
CSS pseudo-class syntax:
selector:pseudo-class {property:value}
CSS pseudo-elements syntax:
selector:pseudo-element {property:value}
Few pseudo-classes and elements are explained below:
1. Anchor Pseudo-classes
Most of you guys know about these classes, those are basically for the link tag i.e. Anchor tag “<a>”. See below for some examples
a:link {color:#00ff00} /* unvisited link */
a:visited {color:#00ff00} /* visited link */
a:hover {color:#ffff00} /* mouse over link */
a:active {color:#0000ff} /* selected link */
Pseudo-classes could be pooled with CSS classes:
a.blue:link {color:#0000FF}
at above I have made a “blue” class for Anchor tag “<a>”, combined with pseudo class “:link”. In HTML we will only call class in the anchor tag
<a href=”mygod.html”>My God</a>
2. The :first-child Pseudo-class
The :first-child pseudo-class matches a particular element that is actualy the first child of another element. E.g if we use this with <p> tag it will change the style of first ever <p> tag on the page.
Note: <!DOCTYPE> must be declared, if you want “:first-child” to work in IE
<html>
<head>
<style type=”text/css”>
p > i:first-child{ font-weight:bold; color: #ff0000; }
</style>
</head><body>
<p>Hello, text is in <i>strong</i> format.</p>
<p>Hello, text is in <i>strong</i> format.</p>
</body>
</html>
3. “:first-letter” pseudo-element :-
It will add a style or define a style to the first character of a text/content.
Note: The below are the properties which apply to the “first-line” pseudo-element:
font, color, background property, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height, clear
p:first-letter
{
color:#00EEEE;
font-weight:bold;}
4. “:first-line” pseudo-element :-
It will add a style or define a style to the first line of a text/content.
p:first-line
{
color:#00EEEE;
font-weight:bold;}
Note: The below are the properties which apply to the “first-letter” pseudo- element
font, color, background, margin, padding, border,text-decoration, vertical-align when “float” is “none”, text-transform, line-height, float, clear
Note: Both the “first-letter” and “first-line” pseudo-element will only be used with block-level elements.
5. “:after “ pseudo-element :-
it is basically used to add the content after any element. It insert some content after the element. E.g. in the example below I have added an image after H1 tag
h1:after {content:url(image.gif); }
6. :before pseudo-element :-
it is basically used to add the content before any element. It insert some content after the element. E.g. in the example below I have added an image before the text of H4 tag
H4:before{content:url(image.gif); }
7. The :lang Pseudo-class
The :lang pseudo-class allow you to define special sets or policies for different languages.
Note: This tag is only supported by IE 8 (and higher)or define a <!DOCTYPE>
e.g
<html>
<head>
<style type=”text/css”> q:lang(no) {quotes: “#” “#”}
</style>
</head><body> <p>Some text <q lang=”no”>A hash in a paragraph</q> Again Some text.</p> </body>
</html>
