CSS Combinators

0 3603

A selector can contain more than one simple selector. Between the simple selectors.

1. Adjacent sibling selectors (+): The adjacent sibling selector selects all elements that are the adjacent siblings of a specified element.

Example:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
li + li + li { color:#009900}
</style>
</head>

<body>
<ul>
<li> home </li>
<li> about </li>
<li> services </li>
</ul>
</body>

</html>

Result:

2. General sibling selectors (~) : The general sibling selector selects all elements that are siblings of a specified element.

Example:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p ~ h1 { color:#009900}
</style>
</head>

<body>
<p> Welcome to onTime IT Solution </p>
<h1> Learn HTML Tutorials </h1>
<p> Learn CSS Tutorials </p>
<p> Learn PHP Tutorials </p>
</body>

</html>

Result:

3. Child selectors (>) : The Child selector above is a child combinator selector.

Example:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p > span { color:#009900; font-size:18px;}
</style>
</head>

<body>
<p> Welcome to <span> onTime </span> Infotech Pvt Ltd </p>
<p> Welcome to <span> onTime </span> IT Solution </p>
<p> IT <span> Solutions </span> Website Designing & Development </p>
<p> App Development <span> Digital </span> Marketing </p>
</body>

</html>

Result: