CSS child selectors select an element which is a child of another element.
If, x, y and z are three HTML elements and z resides within start and end tag of y, and y resides within start and end tag of x; then y is called as a child of x; and z is called as a child of y.
While writing child selectors, selectors must be separated with «>» combinator.
Simple Example of CSS child selectors
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit.
View this simple example of CSS child selector in a separate browser window.
Advanced Example of CSS child selectors
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Donec a urna elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit.
View this advanced example of CSS child selector in a separate browser window.
Follow us on Facebook and Twitter for latest update.
Weekly Trends
Java Basic Programming Exercises
SQL Subqueries
Adventureworks Database Exercises
C# Sharp Basic Exercises
SQL COUNT() with distinct
JavaScript String Exercises
JavaScript HTML Form Validation
Java Collection Exercises
SQL COUNT() function
SQL Inner Join
JavaScript functions Exercises
Python Tutorial
Python Array Exercises
SQL Cross Join
C# Sharp Array Exercises
We are closing our Disqus commenting system for some maintenanace issues. You may write to us at reach[at]yahoo[dot]com or visit us at Facebook
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.
Web development, programming languages, Software testing & others
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.
So in the above sample code, the element is the parent followed by a child element
. 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
div > p
This paragraph is under the div element
This paragraph2 is under the div element.
This paragraph is not under the div element. As it is not the child element of div
Even This paragraph is under the div element.
This paragraph is not under the div element.
This paragraph is not under the div element.
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.
Example #2
Example #3
Targeting Bold element using child selector
div.select > b
Content 1
Content 2
Content 3
Last content.
Explanation: The above code says the child selector selects the div class followed by element. Therefore the first b element content and last b element are stylish.
Example #4
The List content given here is blue.
Over here, the text context is not styled in this list .
As the element is not Child .
For the same html Code above. Let’s see a different selection of the child elements.
body > div > ul Output:
Now you can see the style changes in the second line as I have made a child selector deep down.
Example #5
body > p > a
From the World Health Organization
This pandemic disease COVID-19 is an infectious disease which makes breathing illness. It gets spreaded when an Infected person sneeze or cough. And all the public health and other social measures have taken risky work in their work-place is the foundation of The recovery time for this dangerous disease is unknown.
Further reading more here
Example #6
Child selector demo using Span and div element
span < background-color: #00FFFF; >div > span
This is the first Span Content under div element. Second Span under the div element.
This content of the span is not included under div.
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 –
38+ Hours of HD Videos 9 Courses 5 Mock Tests & Quizzes Verifiable Certificate of Completion Lifetime Access 4.5
149+ Hours of HD Videos 28 Courses 5 Mock Tests & Quizzes Verifiable Certificate of Completion Lifetime Access 4.5
253+ Hours of HD Videos 51 Courses 6 Mock Tests & Quizzes Verifiable Certificate of Completion Lifetime Access 4.5
CSS Course Bundle — 19 Courses in 1 | 3 Mock Tests 82+ Hours of HD Videos 19 Courses 3 Mock Tests & Quizzes Verifiable Certificate of Completion Lifetime Access 4.5
Комбинатор > разделяет 2 селектора, находит элементы заданные вторым селектором, являющие прямыми потомками для элементов отобранных первым селектором. Напротив, два селектора в селекторе потомков находят элементы не обязательно являющиеся прямыми потомками, т.е. несмотря на количество «прыжков» до них в DOM.
CSS Child Selector: Learn to Select the First, Second and Last Child
TL;DR – The > symbol creates a CSS child selector used for finding the direct children of elements.
Contents
What child selectors are
To create a CSS child selector, you use two selectors. The child combinator selects elements that match the second selector and are the direct children of the first selector.
Operators make it easier to find elements that you want to style with CSS properties.
Creating a combinator
The CSS child selector has two selectors separated by a > symbol.
The first selector indicates the parent element.
The second selector indicates the child element CSS will style.
div > p < background-color: lightblue; >
Selecting the first child elements
The CSS selector using the > symbol only selects direct children. To find the first child, CSS needs to include :first-child .
The following example shows the outcome when we write p:first-child in CSS and select only the first child to style:
div > p:first-child < background-color: lightblue; >
Using CSS to select the second child
You can find a second child that has a specific type and a parent with :nth-of-type(2) .
The example below uses the :nth-of-type(2) selector from CSS to select the second child of :
div > p:nth-of-type(2) < background-color: lightblue; >
Tip: in the brackets of :nth-of-type, you specify which child you want to select.
:nth-of-type vs. :nth-child
The :nth-child() selector is very similar to :nth-of-type() . Here are the main differences:
:nth-child() selects all specified (for instance, second) children regardless of the type of their parents.
:nth-of-type() selects the specified children of a specific parent.
Easy to use with a learn-by-doing approach
Offers quality content
Gamified in-browser coding experience
The price matches the quality
Suitable for learners ranging from beginner to advanced
Free certificates of completion
Focused on data science skills
Flexible learning timetable
Simplistic design (no unnecessary information)
High-quality courses (even the free ones)
Variety of features
Nanodegree programs
Suitable for enterprises
Paid Certificates of completion
Finding the last child
To style the last child with CSS properties, you need to select it with the :last-child selector.
The following example chooses the last child of the element, which will be styled with the CSS background-color property.
div > p:last-child < background-color: lightblue; >
Note: at first, the elements that the :last-child selected had to have parents. Now, you can select the last child among other siblings.
Descendant selectors
Descendant selectors do not have combinators. Instead, CSS separates these selectors with a white space between them.
The descendant selector finds all descendants of a specified element regardless of their position in the DOM tree.
This example selects all descendants of :
divp < background-color: lightblue; >
General Sibling Selectors
The combinator ~ separates two selectors and selects the second element when it comes after the first element, and both selectors have the same parent.
div ~ p < background-color: lightblue; >
Adjacent sibling selectors
The + combinator separates two selectors and selects the second element when it comes immediately after the first selector, and both share a parent.
div + p < background-color: lightblue; >
CSS child selector: useful tips
The CSS child combinator selects only direct children and goes only one level down the DOM tree. The descendant selector finds elements that are even three levels deep in the DOM.
:last-child selector is the same as :nth-last-child(1) .
This CSS tutorial explains how to use the CSS child selector with syntax and examples.
Description
The CSS child selector uses the > character to target an element that is a direct child of an element type.
Syntax
The syntax for the :active CSS selector is:
Parameters or Arguments
element1 The first element type to match. element2 The second element type to match that must be a direct child of element1. style_properties The CSS styles to apply to the targeted element2.
Note
The child selector uses the > combinator to target an element that is a direct child of another element.
See also the descendant selector.
Browser Compatibility
The CSS child selector has basic support with the following browsers:
Chrome
Firefox (Gecko)
Internet Explorer 7+ (IE 7+)
Opera
Safari (WebKit)
Example
We will discuss the child selector below, exploring examples of how to use this selector in CSS.
The CSS would look like this:
The HTML would look like this:
TechOnTheNet.com
Oracle/PLSQL
SQL
Excel
CheckYourMath.com
BigActivities.com
tag will be styled by the child selector (ie: styled with red font). So in the case of the three tags under the tag: tag and therefore are not styled by the child selector. If you wanted them to styled like the other tags, you might want to try using the descendant selector.
