1) Normal combinator
=> Suppose we have several h2 in an Html file and some h2's are with the class ="orange_color" , and there are some p and div tags too with the class = "orange_color". Now we only want to color h2 with the class="orange color" as red , but if we use the class selector the p and div tags with the same class will also color as red. In this situation we use combinators and the combinators will only color those h1 red which has the class="orange_color", rest of the h2's with different class and other elements with the same class will be ignored.
The syntax of Normal cominator is :
h1.orange_color{
color: red;
}
Index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Normal combinator</h1>
<h2>I'm giving examples, no class </h2>
<h2 class="orange_color"> I'm giving examples</h2>
<p class="orange_color">Lorem ipsum dolor sit amet c</p>
<div class="orange_color">Lorem ipsum dolor sit am?</div>
<h2> h2 with no class ="orange_color" </h2>
<h2 class="orange_color"> h2 with class ="orange_color" </h2>
</body>
</html>
style.css file:
.orange_color {
color: orange;
}
h2.orange_color {
color: red;
background: lightblue;
}
Output:
Normal combinator
I'm giving examples, no class
I'm giving examples
Lorem ipsum dolor sit amet c
Lorem ipsum dolor sit am?
h2 with no class ="orange_color"
h2 with class ="orange_color"
2) Direct child combinator
=> Lets say we have 3 blocks of divs.
1st div
<div class="title">
<p class="about"> </p>
<h2 class= "description"> </h2>
</div>
2nd div
<div class="sub_content">
<p class="about"> </p>
<h2 class="description"> </h2>
</div>
3rd div
<div class ="main_content">
<p class = " about"> </p>
<h2 class=" description"> </h2>
</div>
now we notice that all the 3 div's have different class name and we also notice that all the div's have p and h2 tags will same class. Now if we only want the class="about" red in color that is inside the div with class="title", we will use direct child combinator.
The syntax of direct child combinator:
.title > .class{
color : red;
}
Index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="title">
<p class="about">Lorem ipsum dolor sit amet consectetur. </p>
<h2 class="description">direct child </h2>
</div>
<div class="sub_content">
<p class="about">Lorem ipsum dolor sit amet. </p>
<h2 class="description"> direct child</h2>
</div>
<div class="main_content">
<p class=" about"> Lorem ipsum dolor sit amet.</p>
<h2 class=" description"> direct child</h2>
</div>
</body>
</html>
style.css file:
.title>.about {
color: red;
background: palegoldenrod;
}
.about {
color: darkgreen;
}
Output:
Lorem ipsum dolor sit amet consectetur.
direct child
Lorem ipsum dolor sit amet.
direct child
Lorem ipsum dolor sit amet.
direct child
3) Generic child combinator selector
=> For using generic child combinator we need to give a space between the parent selector and the child selector.
<div class="title">
<div>
<p class="about"> </p>
<h2 class= "description"> </h2>
</div>
</div>
here because of the extra div tag about and description class are not direct child of title class.
The syntax will be:
.title .class{ // the space between .title and .class is very important
color : red;
}
Index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="title">
<div>
<p class="about">Lorem ipsum dolor sit amet consectetur. </p>
<h2 class="description">generic child </h2>
</div>
</div>
<div class="sub_content">
<p class="about">Lorem ipsum dolor sit amet. </p>
<h2 class="description"> generic child</h2>
</div>
<div class="main_content">
<p class=" about"> Lorem ipsum dolor sit amet.</p>
<h2 class=" description"> generic child</h2>
</div>
</body>
</html>
style.css file:
.title .about {
color: red;
background: palegoldenrod;
}
.about {
color: darkgreen;
}
Output:
Lorem ipsum dolor sit amet consectetur.
generic child
Lorem ipsum dolor sit amet.
generic child
Lorem ipsum dolor sit amet.
generic child
Comments
Post a Comment