Last updated on October 31st, 2020 at 07:42 am.

24 CSS Selectors – Combination Selectors , Multiple Selectors

In the last post you did learn about Pseudo Selectors. In this post you will learn about Combination selectors.

First, let us talk about the combination selectors, then we’ll talk about Multiple selectors which are very easy to understand.

COMBINATION Selectors

Combination selectors arise when you use more than one selector to target certain HTML elements. Combination selectors are used to drill down deeper and make sure that the selection is more accurate.

For instance if you only want to style <p> tags which are located within a certain class , you may use these selectors to target the paragraphs in question.

Let’s say we have two selectors , X  and Y . These two selectors may be any kind of a selector. They may be a tag selector, a class selector, an ID selector  or even an attribute selector. Any selector . Having these two selectors X and Y, we can combine them.

Depending on how we combine them, the selected element may be different.

The following is a clear distinction between the different combination selectors  and what they mean.

Using X and Y as any selector, the following are the Combination selectors we have:

1 X Y (X ( space) Y )

This is, X (a space) Y .

Syntax : X Y { /*CSS*/}

Example,  #home  p { /*CSS*/}

This will select Y , such that Y is a descendant (child, grandchild, great grandchild  etc) of X . As long as there is an element Y which is within X , it will be selected and styled.

<!-- Example -->
 <div id="home">
<!--These Two P tags are Children of #Home . And they are siblings of each other--> 
<p> Child Paragraph 1 </p>
<p> Child Paragraph 2</p>
<p> Child Paragraph 3</p>
  <div id="widget">
<!--These P tags are Grandchildren of  #Home --> 
       <p>Grandchild 1 </p>
       <p>Grandchild 2 </p>
       <p>Grandchild 3 </p>
   </div>
  </div>

If we have  , #home p  , this will style all <p> tags, including those which are within the div with an ID of Widget. It will style both the children and grandchildren.

#home p  { color : red;}

The above will make the color of all Paragraphs red.

2 XY

This is X and Y back to back with no spacing between them.

Syntax:  XY {/* CSS */}

For an element to be selected, it must match both X and Y at the same time .

Examples :

<div class=”homepage” id=”home”>

From the above,  .homepage#home  would only style that <div> and not any other <div>,

Sample code :

.homepage#home{background-color: black}

3 X>Y

Syntax :  X>Y {/* CSS */}

This will select Y , such that Y is a direct child of X. It will only style direct children and will ignore all other descendants such as grandchild elements and so on.

Using the same code from before :

<!-- Example -->
 <div id="home">
<!--These Two P tags are Children of #Home . And they are siblings of each other--> 
<p> Child Paragraph 1 </p>
<p> Child Paragraph 2</p>
<p> Child Paragraph 3</p>
  <div id="widget">
<!--These P tags are Grandchildren of  #Home --> 
       <p>Grandchild 1 </p>
       <p>Grandchild 2 </p>
       <p>Grandchild 3 </p>
   </div>
  </div>

If our CSS is  :  #home>p{color: blue;}  ,

This will only style the first three Paragraphs and will ignore the Paragraphs under the div  with an ID of widget .

4 X + Y

Syntax :  X+Y {/* CSS */}

This will match Y , such that Y happens to be the next sibling of X.

Note that if there are many elements of Y which are also siblings of X, the first one is the only one which will be styled.

Taking our HTML code which we have used twice above, we can add UL tags as siblings of the first div. Let us add <ul> Tags which are siblings of the div with an ID of home.

The code is below. Feel free to copy it and apply the styles on them.

<!-- Example -->
 <div class="homepage" id="home">
<!--These Two P tags are Children of #Home . And they are siblings of each other--> 
<p> Child Paragraph 1 </p>
<p> Child Paragraph 2</p>
<p> Child Paragraph 3</p>
  <div id="widget">
<!--These P tags are Grandchildren of  #Home --> 
       <p>Grandchild 1 </p>
       <p>Grandchild 2 </p>
       <p>Grandchild 3 </p>
   </div>
  </div>
  
  <!-- These UL are  siblings of the div with an ID of home -->
  <ul>
	  <li> UL 1-  List One</li>
	  <li> UL 1- Two</li>
	  <li> UL 1- Three</li>
  	
  </ul>
  <ul>
	  <li> UL 2-List One</li>
	  <li> UL 2-List Two</li>
	  <li> UL 2-Three</li>
  	
  </ul>
  <ul>
	  <li> UL 3-List One</li>
	  <li> UL 3-List Two</li>
	  <li> UL 3-Three</li>
  	
  </ul>

If we have the CSS :

#home+ul{background-color: gray;}

The above CSS will only affect the first UL which is a sibling of the div with the ID of home.

The CSS will make the background of the First List Items to be gray.

5 X ~ Y

Syntax :  X ~ Y {/* CSS */}

This will style, all Y which happen to be siblings of X .

For instance, in the above example for (X+Y), we were only able to style the first UL. If we want to style all the other ULs which are siblings of the div with the ID of home, we could use X ~ Y .

Using the same HTML above (for X+Y) , we can style all ULs which are siblings of the div, using :

#home~ul{background-color: gray;}

The above CSS will change the background of all the ULs which are a sibling of div#home (do you remember this? This simply says, the div with an ID of home.)

Multiple Selectors

If you want to apply the same set of styles to different elements, you will multiple selectors. To use the same style on different selections, you will separate the different selections using a comma.

For example, the following  code will make Paragraphs and all the other Heading Tags to be bold  and red.

p,h1,h2,h3,h4,h5 {font-weight:bold; color:red;}

You may also use multiple selectors for combined selectors:

#home~ul, .homepage#home  , #home div p { background-color: gray; color:black;}

You can use the same CSS across as many elements as you would like to. Just separate the selections using a comma as shown in the example above.

That’s it for this post, we’ll continue in the next post.

To learn HTML and CSS click the button below: