Categories
CSS Tutorials

Combinators

introduction
Formatting Text
Box Model
Advanced selectors
More about CSS

CSS combinators explain the relationship between the selectors. CSS selectors are used to select the elements for style purposes. A CSS selector can be a simple selector or a complex selector consisting of more than one selector connected using combinators. 

There are four types of combinators available in CSS which are discussed below: 

  • General Sibling selector (~)
  • Adjacent Sibling selector (+)
  • Child selector (>)
  • Descendant selector (space)

General sibling selector

The general sibling selector is used to select the element that follows the first selector element and also share the same parent as the first selector element. This can be used to select a group of elements that share the same parent element.

Example:

<html><head>
  	<title>Combinator Property</title>
  	<style>
  		div ~ p{
  			color: #009900;
  			font-size:32px;
  			font-weight:bold;
  			margin:0px;
  			text-align:center;
  		}
  		div {
  			text-align:center;
  		}
  	</style></head><body><div>General sibling selector property</div><p>Edupoly Tutorials</p><div><div>child div content</div>		
      <p>EPT</p></div>	
    <p>Edupoly</p>	
    <p>Poly</p></body>
</html>

Output:

Adjacent sibling selector

The Adjacent sibling selector is used to select the element that is adjacent or the element that is the next to the specified selector tag. This combinator selects only one tag that is just next to the specified tag.

Example:

<html><head>
  	<title>Combinator Property</title>
  	<style>
  		div + p{
  			color: #009900;
  			font-size:32px;
  			font-weight:bold;
  			margin:0px;
  			text-align:center;
  		}
  		div {
  			text-align:center;
  		}
  		p {
  			text-align:center;
  		}
  	</style></head><body><div>Adjacent sibling selector property</div>	
    <p>Edupoly Tutorials</p><div><div>child div content</div><p>EPT</p></div><p>Edupoly</p><p>Hello</p></body>
</html>

Output:

Child selector

 This selector is used to select the element that is the immediate child of the specified tag. This combinator is stricter than the descendant selector because it selects only the second selector if it has the first selector element as its parent.

Example:

<html>
	<head>
		<title>Combinator Property</title>
		<style>
			div>p {
				color: #009900;
				font-size: 32px;
				font-weight: bold;
				margin: 0px;
				text-align: center;
			}


			div {
				text-align: center;
			}


			p {
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div>Child selector property</div>
		<p>Edupoly Tutorials</p>
		<div>
			<div>child div content</div>
			<p>EPT</p>
		</div>
		<p>Edupoly</p>
		<p>Hello</p>
	</body>
</html>

Output:

Descendant selector

This selector is used to select all the child elements of the specified tag. The tags can be the direct child of the specified tag or can be very deep in the specified tag. This combinator combines the two selectors such that selected elements have an ancestor same as the first selector element.

Example:

<html>
    <head>
        <title>Combinator Property</title>
        <style>
            div p {
                color: #009900;
                font-size: 32px;
                font-weight: bold;
                margin: 0px;
                text-align: center;
            }
            div {
                text-align: center;
            }
            p {
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div>Descendant selector property</div>
        <p>Edupoly Tutorials</p>
        <div>
            <div>child div content</div>
            <p>EPT</p>
            <p>Descendant selector</p>
        </div>
        <p>Edupoly</p>
        <p>Hello</p>
    </body>
</html>

Output: