CSS First-Child



CSS Tutorial  >  First-Child

The :first-child pseudo class is used to represent the first element of a series of sibling elements. The syntax for :first-child is as follows:

[selector-name]:first-child { [some CSS properties] }
The CSS properties defined above will be applied to the first element and not any of the subsequent elements. Let's take a look at two examples below:

Example 1: Use :first-child to change the first paragraph

CSS Declaration

p:first-child {background-color: #ccc;}

The following HTML code,

<p>This is paragraph 1.
<p>This is paragraph 2.
<p>This is paragraph 3.

results in the following:

In Example 1, we used :first-child to specify that the first paragraph will have a gray background.

Example 2: Use :first-child to change the first list item

CSS Declaration

li:first-child {text-decoration:underline;}

The following HTML code,

<ul>
<li>List item 1
<li>List item 2
<li>List item 3
</ul>

results in the following:

In Example 2, we used :first-child to specify that the first item on the list is underlined.

Next: CSS :last-child




Copyright © 2017   1keydata.com   All Rights Reserved   Privacy Policy   About   Contact