combinators in CSS
1. Descendant selector
Descendant selector (space) matches all the elements that are descendants of a specified elements, it means that selectors can select element that are descendants of others selector. The element does not have to be a direct child, but rather any descendant down the line.
Syntax:
element1 element2
{
style_properties
}
Descendant selector
Example
<!DOCTYPE html>
<html>
<head>
<style>
ol li {
color: red;
}
</style>
</head>
<body>
<ol>
<li>Databases</li> <br>
<ul>
<li>Oracle/PLSQL</li>
<li>SQL</li>
</ul>
<li>ASP.Net</li>
<li>Java</li>
</ol> </ul>
</body>
</html>
Descendant selector
output
Descendant selector
Example
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h1 em{
color: blue;
}
ul.menu {
padding:5; list-style:none;
margin:5px;
}
ul.menu li {
display:inline;
}
ul.menu li a{
margin:8px;
text-decoration:none;
}
</style>
</head>
<body>
<h1>This is <em>Heading</em></h1>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Sell</a></li>
<li><a href="#">Contact</a></li>
</ul>
</body>
</html>
Descendant selector
output
2. Child selector (>)
This selector is used to match all the elements which are child of a specified element. In another word, The CSS child selector uses the > character to target an element that is a direct child of an element type.
Syntax:
element1 > element2
{
style_properties
}
Child selector
Example
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ol > li {
color: blue;
padding:5px;
}
</style>
</head>
<body>
<ol>
<li>jadhav Publication</li>
<ul>
<li>C Language</li>
<li>IT Tools</li>
<li>Python</li>
</ul>
<li>www.jadhav.com</li> <li>www.W3C.com</li>
</ol>
</body>
</html>
Child selector
output
3. Adjacent sibling selector (+)
Adjacent sibling selector uses "+" sign to combine two sequences of simple selectors. It is a selector for separating two selectors and matches the second element only when it immediately follows the first element. In this case, both are the children of the same parent element. In another word, It is use to select HTML elements that are adjacent siblings of some other HTML element.
Syntax:
Element+ Element2
{
style_properties
}
Adjacent sibling selector
Example
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h2+ p {
text-align:center;
color: red;
font-size: 25px;
}
ul.tbp + p {
color: green;
text-indent. 180px;
}
h1{
Color:pink;
text-align: middle;
}
</style>
</head>
<body>
<h2>Welcome to Tbalaji Publication</h2> <p>We are giving the following items.....</p> <p>Some of our books are given below:</p>
<ul class="top">
<li>1-> Python</li>
<li>2-> IT Tools</li>
<>3-> C Language</li>
</ul>
<h1>That's Set</h1>
<p>Goto Our Next Page></p>
</body>
</html>
Adjacent sibling selector
output
General sibling selector (~)
The general sibling combinator (~) separates two selectors and matches the second element only if it follows the first element (though not necessarily immediately) and both are children of the same element.
Syntax:
Former_Element- Target_Element {
style
}
General sibling selector
Example
<!DOCTYPE html>
<html>
<head>
<style>
div-p {
background-color: red;
font-size: 20px;
}
</style>
</head>
<body>
<h2>Welcome to pune Publication</h2>
<div>
<p>Start Code section 1</p>
<code>Write some code here</code> <p>End of code section 1</p>
</div>
<p>Start Code section 2</p>
<code>Write some code here</code>
</body>
</html>
General sibling selector
output
