Sometimes we want to format a child or children of an element but not the element itself!
CSS has a set of selectors that we can use to target the child or children of a specified element.
We’re going to explain these types of selectors one by one starting with DIRECT child selector.
Example: li>a { }, ul>li { }, #id> a { }, .class-name> p { } etc. This type of selector targets all those elements of the mentioned type at the right side of > sign in the selector and is DIRECT child of the specified element.
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<style type="text/css">
#parent>ul{
border:double;
}
</style>
</head>
<body>
<div id="parent">
<ul>
<li>Black</li>
<li>white</li>
<li>Blue</li>
<li>
<ul>
<li>cat</li>
<li>dog</li>
<li>donkey</li>
</ul>
</li>
</ul>
</div>
</body>
</html>In the example above the target was direct child of the “div” element and so the descendant <ul> element didn’t take the effect.
– Descendant Child Selector:
Example: p a { }, div p { }, .class-name .another-class-name { }, #id-name .class-name { } etc. This type of selector targets all those elements of the mentioned type at the right side of space in the selector and is descendant child of the specified element.
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<style type="text/css">
#parent ul{
border:double;
}
</style>
</head>
<body>
<div id="parent">
<ul>
<li>Black</li>
<li>white</li>
<li>Blue</li>
<li>
<ul>
<li>cat</li>
<li>dog</li>
<li>donkey</li>
</ul>
</li>
</ul>
</div>
</body>
</html>In the example above the target was descendant children of the “div” element and so the descendant <ul> element selected as well.
Another type of child selector is ":first-child" Pseudo-Class.
When we want to apply a style to an element that is the first child of its parent, we can use this type of selector.
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<style type="text/css">
li:first-child{
background-color: red;
}
</style>
</head>
<body>
<div id="parent">
<ul>
<li>Black</li>
<li>white</li>
<li>Blue</li>
<li>Pink</li>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</ul>
<ol>
<li>Omid</li>
<li>Jack</li>
<li>Ellen</li>
</ol>
</div>
</body>
</html>In the example above all <li> elements that are the first child of their parent have the red background color.
Another type of Selector is ":last-child" Pseudo Class:
When we want to apply a style to an element that is the last child of its parent, we can use this type of selector.
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<style type="text/css">
li:last-child{
background-color: red;
}
</style>
</head>
<body>
<div id="parent">
<ul>
<li>Black</li>
<li>white</li>
<li>Blue</li>
<li>Pink</li>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</ul>
<ol>
<li>Omid</li>
<li>Jack</li>
<li>Ellen</li>
</ol>
</div>
</body>
</html>In the example above all <li> elements that are the last child of their parent have the red background color.
Note: in the example above, <li> Pink </li> element does not have the red background color because it is not the last element of its parent the <ul> element.
Another type of Selector is ":only-child" Pseudo-Class.
When we want to apply a style to an element that is the only child of its parent, we can use this type of selector.
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<style type="text/css">
div{
border: double;
}
p:only-child{
background-color: red;
}
</style>
</head>
<body>
<div >
<p>Only child</p>
</div>
<div>
<p>One of many</p>
<p>One of many</p>
<p>One of many</p>
<p>One of many</p>
</div>
</body>
</html>The next type of selector is ":nth-child" Pseudo Class.
When we want to apply a style to an element that is the nth child of its parent, we can use this type of selector
In the example below we want to format all those <p> elements that are the second child of their parent:
<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<style type="text/css">
p:nth-child(2){
background-color: red;
}
</style>
</head>
<body>
<div >
<p>Only child</p>
<h1>this is for test</h1>
</div>
<div>
<p>One of many</p>
<p>One of many</p>
<p>One of many</p>
<p>One of many</p>
</div>
</body>
</html>We can also use "odd" and "even" for the value of this selector in order to style those elements that are "odd" or "even".
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<style type="text/css">
p:nth-child(odd){
background-color: red;
}
</style>
</head>
<body>
<div >
<p>Only child</p>
<h1>this is for test</h1>
</div>
<div>
<p>One of many</p>
<p>One of many</p>
<p>One of many</p>
<p>One of many</p>
</div>
</body>
</html>If we want to select, say, every second item in a list, we can use the number 2 followed by the letter 'n'.
Example: nth-child(2n)
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<style type="text/css">
p:nth-child(2n){
background-color: red;
}
</style>
</head>
<body>
<div>
<p>One of many</p>
<p>One of many</p>
<p>One of many</p>
<p>One of many</p>
<p>One of many</p>
<p>One of many</p>
<p>One of many</p>
<p>One of many</p>
</div>
</body>
</html>
You can change the starting position for example from the second child using "+position-number"Let’s say we want to highlight every second <p> element but we want to start from the third child of that parent.
Here's how we can do it: nth-child(2n + 3)
“2n” means every second element and “+3” means start from the third child.
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<style type="text/css">
p:nth-child(2n +3){
background-color: red;
}
</style>
</head>
<body>
<div>
<p>One of many</p>
<p>One of many</p>
<p>One of many</p>
<p>One of many</p>
<p>One of many</p>
<p>One of many</p>
<p>One of many</p>
<p>One of many</p>
</div>
</body>
</html>You can also use negative number for 'n' as the value of selector of this type.
For example if you set the value to -3n + 5, browsers will cycle through child elements backwardly starting from fifth child, trying to find every third element.
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<style type="text/css">
p:nth-child(-2n +5){
background-color: red;
}
</style>
</head>
<body>
<div>
<p>One of many</p>
<p>One of many</p>
<p>One of many</p>
<p>One of many</p>
<p>One of many</p>
<p>One of many</p>
<p>One of many</p>
<p>One of many</p>
</div>
</body>
</html>The next type of selector is ":first-of-type" Pseudo Class.
If we want to format those elements that are the first type within the body of their container (parent) we can use this type of selector.
Note: We are looking for “first type” in this type of selector. So don’t confuse it with “first-child” because a first-type might be the nth child of its parent.
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<style type="text/css">
p:first-of-type{
background-color: red;
}
</style>
</head>
<body>
<div>
<h1>header</h1>
<p>I'm the first of type p element in this div container</p>
<p>One of many</p>
<p>One of many</p>
<p>One of many</p>
<p>One of many</p>
<p>One of many</p>
<p>One of many</p>
<p>One of many</p>
</div>
</body>
</html>In the example above the second child is the first type of <p> element within its container so it will have the red background color.
Another type of selector is "last-of-type" Pseudo-Selector.
If we want to format those elements that are the last type within the body of their container (parent) we can use this type of selector.
Note: We are looking for “last type” in this type of selector. So don’t confuse it with “last-child” because a last-type might be the nth child of its parent.
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<style type="text/css">
p:last-of-type{
background-color: red;
}
</style>
</head>
<body>
<div>
<h1>header</h1>
<p>I'm the first of type p element in this div container</p>
<p>One of many</p>
<p>One of many</p>
<p>One of many</p>
<p>One of many</p>
<p>One of many</p>
<p>One of many</p>
<p> I'm the last of type p element in this div container </p>
<h4>end</h4>
</div>
</body>
</html>Another type of selector is "nth-of-type" Pseudo-Selector.
If we want to format those elements that are the nth type within the body of their container (parent) we can use this type of selector.
Note: it accepts the same formula that we can used for “nth-child”.
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<style type="text/css">
p:nth-of-type(odd){
background-color: red;
}
</style>
</head>
<body>
<div>
<h1>header</h1>
<p>I'm the first of type p element in this div container</p>
<p>One of many</p>
<p>One of many</p>
<p>One of many</p>
<p>One of many</p>
<p>One of many</p>
<p>One of many</p>
<p>I'm the last of type p element in this div container</p>
<h4>end</h4>
</div>
</body>
</html>Another example:
<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<style type="text/css">
p:nth-of-type(3n + 3){
background-color: red;
}
</style>
</head>
<body>
<div>
<h1>header</h1>
<p>I'm the first of type p element in this div container</p>
<p>One of many</p>
<p>One of many</p>
<p>One of many</p>
<p>One of many</p>
<p>One of many</p>
<p>One of many</p>
<p>I'm the last of type p element in this div container</p>
<h4>end</h4>
</div>
</body>
</html>