In this section, we will learn what the child selector is and how to use it in CSS.
Child Selector in CSS
The child selectors are a set of methods we use to access one or more children of an HTML element and apply CSS styles to them.
For example, using child selectors, we can access to the first or last child of an element and format it accordingly. Or let’s say and element has both children and grandchildren, now using the child selectors, we can focus on the children of an element only (skip the grandchildren) and format them accordingly.
So in short, the child selectors are here to ease the process of accessing the children of an element and help us to apply CSS styles to them.
CSS Direct Child Selector:
The first child selector is called direct child selector and it is used to target the direct children of an HTML element.
Note that this selector won’t care about the grandchildren of the target element (basically, it will skip them).
For example, let’s say you have the <body> element and it has 3 <div> children. Now each of these elements also has other children for themselves as well! Now, if we use the direct child selector on the <body> element, only the <div> elements of the <body> will be targeted here and so the children of these <div> elements will be ignored.
Direct Child Selector in CSS Syntax:
element > child-element{
//body...
}
`element`: this is the parent element we want to select its children.
`child-element`: this is the name of those direct children of an element we want to style using CSS. For example, if the value here is set to `.cla` then the selector will target all the direct children of the parent element that has the class name `cla` assigned to them.
Example: using direct child selector in CSS
See the Pen using direct child selector in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.
CSS Descendant Child Selector:
This type of selector targets the children and the grandchildren (all the descendant children) of an element
Descendant Child Selector in CSS Syntax:
parent-element child-element {
//body...
}
`parent-element`: this is the element we want to style its descendant children.
`child-element`: this is the element/s that are the descendant of the target `parent-element` and want to style them using CSS properties.
Example: using descendant child selector in CSS
See the Pen using descendant child selector in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.
CSS Pseudo Class: first-child
Using this selector, we can target the first child of an element and apply CSS styles to it.
For example, if there’s a <div> element and its first child is the <h2> element, we can use this selector to target that element and style it accordingly.
This is the syntax of this selector:
element-name:first-child{
//body…
}
Here, the element-name is the one we want to access its first child and change its styles.
Example: using ::first-child pseudo class in CSS
See the Pen using ::first-child pseudo class in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.
In the example above all <li> elements that are the first child of their parent have the red background color.
CSS Pseudo Class: last-child
This type of selector is used to access the last child of an element and style that using CSS properties.
This is the syntax of this selector:
element-name:last-child{
//body...
}
The `element-name` here is the name of the target element we want to style its last child.
Example: using ::last-child pseudo class in CSS
See the Pen using ::last-child pseudo class in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.
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.
CSS Pseudo Class: only-child
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: using ::only-child pseudo class in CSS
See the Pen using ::only-child pseudo class in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.
CSS Pseudo Class: nth-child()
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
CSS Pseudo Class nth-child() Syntax:
element-name:nth-child(number){
//body…
}
Here the `element-name` is the name of the element we want to target one of its children and style it.
`:nth-child(number)`: The number we set in the pair of parentheses defines the child element we want to style. For example, if the value is set to 3, that means the third child of the target element is the target of this selector then.
For example:
#purp:nth-child(3){
//body…
}
Here, the target element we want to style is the third child of an element that has the id value of #purp.
Example: using ::nth-child() pesudo class in CSS
See the Pen using ::nth-child() pesudo class in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.
nth-child() Pseudo Class with “odd” and “even” values:
There are two special words we can put within the pair of parentheses of the `nth-child()` selector:
- “odd”: this value means the target of the selector will be those children of an element that have an odd position. For example, the first element, the third element, the fifth element, and so on.
- “even”: this value means the target of the selector will be those children of an element that have an even position. For example, the second element, the fourth element, the sixth element, and so on.
Example: using “odd” and “even” values in nth-child() pseudo class
See the Pen using "odd" and "even" values in nth-child() pseudo class by Enjoy Tutorials (@enjoytutorials) on CodePen.
nth-child() Pseudo Class with “xn” Values
Using this type of selector, we can define a step and target the children of an element based on this step! For example, we can set the value to 3, which means skip 2 child elements at a time and add the next one as the target element of the selector.
Example: nth-child() with “xn” values
See the Pen nth-child() with "xn" values by Enjoy Tutorials (@enjoytutorials) on CodePen.
nth-child() Pseudo Class with “xn + numbers”
The `nth-child()` selector by default starts from the first child of an element, but we can change this position and make the selector to start from another child of an element.
For example:
nth-child(2n + 3)
This means the start position of this selector must be the third child element of the target parent element.
Example: nth-child() class with “xn + numbers”
See the Pen nth-child() class with "xn + numbers" by Enjoy Tutorials (@enjoytutorials) on CodePen.
nth-child() Pseudo Class with Negative Numbers
We can also use a negative number for ‘n’ as the value of the selector of this type.
For example, if we set the value to -3n + 5, browsers will cycle through child elements backwardly, starting from fifth child, trying to find every third element.
Example: negative numbers and nth-child() pseudo class
See the Pen negative numbers and nth-child() pseudo class by Enjoy Tutorials (@enjoytutorials) on CodePen.
CSS Pseudo Class: first-of-type
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.
For example:
p:first-of-type{
//body...
}
Here, browsers will check the entire elements of the page to see if they have a <p> element as their children. Now, if they found one, the first sub-element of those parent elements that are of type <p>, will be styled according to the declaration block of this selector.
Example: using ::first-of-type pseudo class in CSS
See the Pen using ::first-of-type pseudo class in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.
CSS Pseudo Class: last-of-type
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.
For example:
p:last-of-type{
//body...
}
Here, browsers will check the entire elements of the page to see if they have a <p> element as their children. Now, if they found one, the last sub-element of those parent elements that is of type <p>, will be styled according to the declaration block of this selector.
Example: using ::last-of-type pseudo class in CSS
See the Pen using ::last-of-type pseudo class in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.
CSS Pseudo Class: nth-of-type
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.
Here’s the syntax of this type of selector:
element:nth-of-type(number){
//body…
}
Example: using ::nth-of-type pseudo class in CSS
See the Pen using ::nth-of-type pseudo class in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.
Another example:
See the Pen Another example by Enjoy Tutorials (@enjoytutorials) on CodePen.
