Slide 5.23: CSS pseudo-element

CSS Pseudo-Class (Cont.)

CSS—The :first-child Pseudo-Class (Cont.)

Match all <i> element in all first child <p> elements

In the following example, the selector matches all <i> elements in <p> elements that are the first child of another element:


<html> <head> <style type="text/css"> p:first-child i { color:blue; } </style> </head> <body bgcolor="#EDF3FE"> <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>

CSS—The :lang Pseudo-Class
The :lang pseudo-class allows you to define special rules for different languages. In the example below, the :lang class defines the quotation marks for q elements with lang="no":


<html> <head> <style type="text/css"> q:lang(no) {quotes: "~" "~";} </style> </head> <body bgcolor="#EDF3FE"> <p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p> </body> </html>

Pseudo-Classes
The “CSS” column indicates in which CSS version the property is defined (CSS1 or CSS2).

Pseudo-class	Purpose	CSS
:active	Adds special style to an activated element	1
:focus	Adds special style to an element while the element has focus	2
:hover	Adds special style to an element when you mouse over it	1
:link	Adds special style to an unvisited link	1
:visited	Adds special style to a visited link	1
:first-child	Adds special style to an element that is the first child of some other element	2
:lang	Allows the author to specify a language to use in a specified element	2

Demonstration
The following demonstration shows how the script of HTML and CSS is displayed on the Web:


<html> <head> <style type="text/css"> input:focus { background-color:yellow; } </style> </head> <body bgcolor="#EDF3FE"> <form action="http://www.w3schools.com/css/form_action.asp" method="get"> First name: <input type="text" name="fname" /><br /> Last name: <input type="text" name="lname" /><br /> <input type="submit" value="Submit" /> </form> </body> </html>