Updated June 23, 2023
Introduction to CSS Child Selector
CSS child Selector is defined as the CSS selector that selects only elements that are direct children which is clearer than the contextual selector. This selector uses greater than the symbol “>” that appears between two different selectors, and it is more specific than the descendant selector, which helps to simplify the CSS Style code. The second selector should be the immediate children of the elements.
Syntax
Element1 > element 2
{
// style properties code….;
}Element1 is the parent, and element2 is the child selector.
How does Child Selector work in CSS?
The working process is very simple. This child selector has two selectors to work with and is separated by the “ > ” symbol. The first selector says that it is a parent element, and the second selector says it is a child element with the style properties.
Here let’s take a sample tree structure for a given HTML document.
For example, if an HTML code is like In the above diagram, every element is either a parent or child, forming a parent-child relationship. The root element here is the body element has two children, the p and ul elements. So here, the p element has only one parent, which may have many children, em and strong, respectively. To select p, we need to give a rule like body > p. Suppose we are in need to select an ‘A ‘element using a selector. We would give a rule like strong > A, which is something like p> a; it is not possible using child selectors.
Div > p
{
font-size: 12px;
}So in the above sample code, the <div> element is the parent followed by a child element <p>. So the above statement rule makes any paragraph with the size 12px.
Examples to Implement CSS Child Selector
In this section, we shall explore the child selector briefly with examples. So let’s get started.
Example #1
Code:
<!DOCTYPE html>
<html>
<head>
<style>
div > p {
background-color: salmon;
font-size : 20px;
padding : 3px;
}
</style>
</head>
<body>
<div>
<p>This paragraph is under the div element</p>
<p>This paragraph2 is under the div element. </p>
<section><p>This paragraph is not under the div element. As it is not the child element of div</p></section>
<p> Even This paragraph is under the div element. </p>
</div>
<p>This paragraph is not under the div element. </p>
<p>This paragraph is not under the div element. </p>
</body>
</html>Explanation: Here, we use div > p selector, which says that div is a parent and it selects the child element p, which is the child elements. So over here, the child elements are highlighted in color. The child selector for the above code would look like this.
Output:
Example #2
Code:
<!DOCTYPE html>
<html>
<head>
<title> Example for CSS Child Selector</title>
</head>
<body>
<p> State capitals of the United States</p>
<style>
ol > li {
color : blue;
font-weight:bolder;
}
li > span {
color: green;
font-weight: normal;
}
</style>
<ol type="A">
<li> <span>Alabama
<ul>
<li>Montgomery</li>
</ul>
</span>
</li>
<li><span>Arizona
<ul>
<li>Phoenix</li>
</ul>
</span>
</li>
<li> <span>California
<ul>
<li>Sacramento</li>
</ul>
</span>
</li>
<li> <span>New jersey
<ul>
<li>Trenton</li>
</ul>
</span>
</li>
<li><span>Washington
<ul>
<li>Olympia</li>
</ul></span>
</li>
<li> <span>Pennsylvannia
<ul>
</span>
<li>Harisburg</li></ul>
</li>
</ol>
</body>
</html>Explanation: This code says that the ol tag element is the parent and li is the child. As we have many <li> child elements. It means that <li> is the direct child element that is styled. Everything this selected is highlighted in green color. Now the Output looks like this.
Output:
Example #3
Code:
Targeting Bold element using child selector
<html>
<style type="text/css">
div.select > b {
color: orange;
}
</style>
<body>
<div class="select">
<b>Content 1</b>
<div>
<b>Content 2</b>
<div>
<b>Content 3</b>
</div>
</div>
<b>Last content.</b>
</div>
</body>
</html>Explanation: The above code says the child selector selects the div class followed by <b> element. Therefore the first b element content and last b element are stylish.
Output:
Example #4
Code:
<html>
<title> Child Selector</title>
<style>
body > ol > li
{
color: #6A5ACD;
}
</style>
<body>
<ol>
<li>The List content given here is blue.</li>
</ol>
<div>
<ul>
<li>Over here, the text context is not styled in this list .
<ol>
<li>As the element is <em>not</em> Child .</li>
</ol>
</li>
</ul>
</div>
</body>
</html>Output:
For the same html Code above. Let’s see a different selection of the child elements.
Code:
body > div > ul
{
color: #BA55D3;
} Output:
Now you can see the style changes in the second line as I have made a child selector deep down.
Example #5
Code:
<!DOCTYPE html>
<html>
<head>
<title>HTML: The strong and em tags</title>
<style>
body > p > a {color: #BA55D3;
font-size: 20px;
font-family: Georgia, Times, "Times New Roman", serif;}
</style>
</head>
<body>
<h3>From the World Health Organization </h3>
<p>This pandemic disease COVID-19 is an infectious disease which makes breathing illness. It gets spreaded when an <strong>Infected person sneeze or cough.</strong> And <em> all the public health and other social measures have taken risky work in their work-place</em> is the foundation of <strong><em>The recovery time for this dangerous disease is unknown</em></strong>.</p>
<p><a href="https://www.who.int/health-topics/coronavirus#tab=tab_1">Further reading more here</a></p>
</body>
</html>Output:
Example #6
Child selector demo using Span and div element
Code:
<html>
<style>
span {
background-color: #00FFFF;
}
div > span {
background-color: #FF4500;
}
</style>
<div>
<span>This is the first Span Content under div element.
<span>Second Span under the div element.</span>
</span>
</div>
<span>This content of the span is not included under div.</span>
</html>Output:
Conclusion
Therefore, this article explained how to use the CSS Child selector with their syntax and examples. With this child selector, we could build powerful websites that could be challenging and worthful. Also, we had the right overview of what a child selector is and how to use them in real cases.
Recommended Articles
This is a guide to CSS Child Selector. Here we discuss an introduction to CSS Child Selector, its syntax, and how it works with examples. You can also go through our other related articles to learn more –
