:first-child
In this chapter you will learn:
- Definition for Selector :first-child
- An example showing how to use :first-child CSS selector
- How to combine :first-child with other selectors
Description
The :first-child selector matches the first child element.
Example
<!DOCTYPE HTML> <!-- ja va2 s . c o m-->
<html>
<head>
<title>Example</title>
<style type="text/css">
:first-child {
border: thin black solid;
padding: 4px;
}
</style>
</head>
<body>
<p>I like <span>HTML</span> and <span>CSS</span>.</p>
</body>
</html>
Combine :first-child with other selectors
We can use the :first-child selector as
a modifier and combining it with other selectors.
<!DOCTYPE HTML> <!-- j av a 2 s . co m-->
<html>
<head>
<title>Example</title>
<style type="text/css">
p > span:first-child {
border: thin black solid;
padding: 4px;
}
</style>
</head>
<body>
<p>I like <span>HTML</span> and <span>CSS</span>.</p>
</body>
</html>
Next chapter...
What you will learn in the next chapter:
Home » HTML CSS Tutorial » CSS Selector Reference