|
LILLY ROBOT |
Pseudo-Classes And Elements
Pseudo Classes
The pseudo-classes define dynamic states of an element. We use them when we want to add special styles to an element.
We have already used pseudo-classes Under the section links.
Syntax
selector:pseudo-class{property:value}
| Pseudo-Class | Description | Example |
|---|---|---|
| :link | Styles an unvisited link that has not been visited by the user. | a:link{color:red} |
| :visited | Styles a visited link once it has been visited by the user. | a:visited{color:green} |
| :hover | Styles an element when the user moves the cursor over the link. | a:hover{color:blue} |
| :active | Styles an element when it is activated by the user. | a:active{color:black} |
| :focus | Styles an element with focus, as soon as the user uses an input device e.g. keyboard to input the data. | input:focus{background-color:silver} |
| :first-child | Styles an element that is the first child of some other element. | div > p:first-child{color:red} |
| :last-child | Styles an element that is the last child of some other element. | div > p:last-child{color:blue} |
| :lang | Styles an element that matches the language attribute. | a:lang(fr){color:red} |
Link, Visited, Hover, Active
In the example below we have created a red link for an unvisted web page. If you place the cursor on the link the colour changes to green.
If you press the mouse down on the link the colour changes to black. If you click the link it directs you to the
top of the page and the link colour changes to blue./p>
Example
<style>
a:link {color:red}
a:vistited {color:blue}
a:hover {color:green}
a:active {color:black}
</style>
</head>
<body>
<a href="#">HTML</a>
</body>
Focus
In the example below, if you click the text box the background colour changes to black and the text colour to white.
Example
<style>
input:focus{background-color:black;color:white;}
</style>
</head>
<body>
<form method="post" action=mailto:email address">
Name:<input type="text"/>
</form>
</body>
Displays
Name:
First Child
In the example below, we have several paragraphs but only the first child (first paragraph) will be in red because it is the first child of the div element.
Example
<style>
div > p:first-child{color:red;}
</style>
</head>
<body>
<div>
<p>This is paragraph one.</p>
<p>This is paragraph two.</p>
<p>This is paragraph three.</p>
</div>
<div>
<p>This is paragraph four.</p>
<p>This is paragraph five.</p>
<p>This is paragraph six.</p>
</div>
</body>
Displays
This is paragraph one.
This is paragraph two.
This is paragraph three.
This is paragraph four.
This is paragraph five.
This is paragraph six.
Last Child
In the example below, we have 3 paragraphs but only the last child (last paragraph) background colour will be in yellow because it is the last child of the div element.
Example
<style>
div > p:last-child{background-color:yellow;}
</style>
</head>
<body>
<div>
<p>This is paragraph one.</p>
<p>This is paragraph two.</p>
<p>This is paragraph three.</p>
</div>
<div>
<p>This is paragraph one.</p>
<p>This is paragraph two.</p>
<p>This is paragraph three.</p>
</div>
</body>
Displays
This is paragraph one.
This is paragraph two.
This is paragraph three.
This is paragraph one.
This is paragraph two.
This is paragraph three.
Lang
In the example below we have added a green background colour and a white font color to the element with the language attribute french.
Example
<style>
a:lang(fr){background-color:green;color:white;}
</style>
</head>
<body>
< a lang="fr" href="#"> French</a>
< a lang="en" href="#"> English</a>
</body>
Pseudo-Elements
The pseudo-elements are used when you want to add special styles to specified parts of an element.
Syntax
selector:pseudo-element{property:value}
| Pseudo-Element | Description | Example |
|---|---|---|
| ::first line | An element with more than one line of text has the first line styled. | p::first-line{color:blue} |
| ::first-letter | Styles the first letter of the text in an element. | p::first-letter{font-size:34px} |
| ::before | Adds a content before an element. | p::before{content:url(images/circ.jpg)} |
| ::after | Adds a content after an element. | p::after{content:url(images/circ.jpg)} |
First Line
In the example below, we have a paragraph with 2 lines but only the first line is styled with the colour blue.
Example
<style>
p::first-line{color:blue;}
</style>
</head>
<body>
<p>The first line is in blue and
the second line is in black.</p>
</body>
Displays
The first line is in blue and
the second line in black.
First Letter
In the example below, the first letter of the paragraph has been styled with a font size of 34px.
Example
<style>
p::first-letter{font-size:30px;}
</style>
</head>
<body>
<p>
First letter font-size is 34px.
</p>
</body>
Displays
First letter font-size is 34px.
Before
The ::before pseudo element allows you to place a content before an element. Have a look at the example below to help you understand.
Example
<style>
p::before{content:url(images/circ.jpg)}
p::before{content:"'"}
</style>
</head>
<body>
<p>
An image of circles is before this paragraph.
</p>
<p>
An open quote is before this paragraph.
</p>
</body>
Displays
An image of circles is before this paragraph.
An open quote is before this paragraph.
After
The ::after pseudo element allows you to place a content after an element. Have a look at the example below to help you understand.
Example
<style>
p::after{content:url(images/circ.jpg)}
p::after{content:"'"}
</style>
</head>
<body>
<p>
An image of circles is after this paragraph.
</p>
<p>
A close quote is after this paragraph.
</p>
</body>
Displays
An image of circles is after this paragraph.
A close quote is after this paragraph.