Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Selecting Child Elements with CSS
The CSS child combinator is used to select all child elements of a parent element. The CSS descendant combinator is used to select all descendants of a parent element
Child combinator
The CSS child combinator is used to select all child elements of a parent element. The syntax of the CSS child combinator is as follows. The > comes between two selectors −
Selector > Selector {
attribute: /*value*/
}
Example
The following example illustrate the CSS child combinator −
<!DOCTYPE html>
<html>
<head>
<style>
article > p {
color: black;
background-color: orange;
}
</style>
</head>
<body>
<article>
<h2>Demo Heading</h2>
<p>Duis consequat aliquet leo, quis aliquam ex vehicula in. Vivamus placerat tincidunt hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque semper ex eget nulla consectetur varius.</p>
</article>
<p>This is demo text.</p>
<div>
<p>This is another demo text.</p>
</div>
</body>
</html>
Descendant combinator
The CSS descendant combinator is used to select all descendants of a parent element
The syntax of the CSS descendant combinator is as follows −
Selector Selector {
attribute: /*value*/
}
If you want to select elements within elements, then use the element element combinator −
article p
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
article p {
text-align: center;
border: 10px groove tomato;
}
</style>
</head>
<body>
<article>
<h2>Demo Heading</h2>
<p>This is another demo text. </p>
</article>
<p>This is demo text.</p>
</body>
</html>
The nth child
Style the element that is the nth child of its parent. For example, set the background color for the 1st child of the .child div −
.child:nth-child(1){
background-color: #FF8A00;
}
Set the background color for the 2nd child of the .child div −
.child:nth-child(2){
background-color: #F44336;
}
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
box-sizing: border-box;
}
input[type="button"] {
border-radius: 10px;
}
.child{
display: inline-block;
height: 40px;
width: 40px;
color: white;
border: 4px solid black;
}
.child:nth-child(1){
background-color: #FF8A00;
}
.child:nth-child(2){
background-color: #F44336;
}
.child:nth-child(3){
background-color: #C303C3;
}
.child:nth-child(4){
background-color: #4CAF50;
}
.child:nth-child(5){
background-color: #03A9F4;
}
.child:nth-child(6){
background-color: #FEDC11;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS Pseudo Classes and CSS Classes</legend>
<div id="container">
<div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div>
</div><br>
</body>
</html>
1K+ Views
