HTML/CSS: CSS Relational Selectors

HTML/CSS: CSS Relational Selectors

Written by
Vinish Kapoor is a seasoned software development professional and a fervent enthusiast of artificial intelligence (AI). His impressive career spans over 20 years, marked by a relentless pursuit of innovation and excellence in the field of information technology. As an Oracle ACE, Vinish has distinguished himself as a leading expert in Oracle technologies, a title awarded to individuals who have demonstrated their deep commitment, leadership, and expertise in the Oracle community.
  • CSS / HTML
  • 5 mins read

In this tutorial, you will learn how about CSS relational selectors.

For relational selectors in CSS, terms like parent, child, sibling, and descendant are used in the same way that they are in a family tree.

Child elements are the first level below a parent element, sibling elements are at the same level, and descendant elements can be one or more levels below a parent element.

That means a descendent selector selects all the elements that are contained within another element.

For instance, all of the elements in the following HTML are descendants of the section element, the li elements are also descendants of the section element, and the <a> elements are descendants of the li, ul, and section elements.

An HTML Example for Relational Selectors

 <section id="main">
        <h1>Summer 2019 Town Hall Speakers</h1>
        <ul class="speakers">
            <li>June 20, 2019: <a href="#">David Bran</a></li>
            <li>July 15, 2019: <a href="#">Robert Dsouza</a></li>
            <li>Aug 17, 2019: <a href="#">Juan William</a></li>
        </ul>
        <h2>Post-lecture Luncheons</h2>
        <p>Extended the excitement by going to the luncheon</p>
        <p>A limited number of tickets are available.</p>
        <p><em>Contact us by phone</em> at (559) 123-1212</p>
    </section>

To code a descendant selector, you code a selector for the parent element, followed by a space and a selector for the descendant element.

CSS Relational Selector Examples

In the below example, the selector selects all li elements in the section with the id "main".

Select Descendant

#main li {font-size: 14pt;}

To apply the CSS for all <a> elements under the ul element, code CSS as follows:

ul a {color: red;}

Select Adjacent

The next example shows how to use an adjacent sibling selector to select an element that is coded at the same level as another element and is also coded right next to it.

For example, the h1, ul, h2, and <p> elements in the above HTML are all siblings, and the h2 and <p> elements are adjacent siblings. Below is an example to code adjacent sibling:

h2+p {margin-top: .5em;}

To code an adjacent sibling selector, you code a selector for the first element, followed by a plus sign and a selector for the sibling element.

Select Child

If you want to select all the child elements of a parent element, you code a child selector. To do that, you separate the parent and child selector with a greater than (>) sign.

In the below example, the child selector selects the <p> elements that are children of the section with the "main" id.

#main>p {color: green;}

Select Sibling

A general sibling selector selects any sibling element whether or not the elements are adjacent. To code sibling selector, you separate the selector for the first element and the selector for the sibling element by a tilde (~). The following is an example:

h2~p {margin-left: 2em;}

Notes on CSS Relational Selectors

  • When you use relational selectors, you can often avoid the need for id or class attributes.
  • To select elements only when they are descendants of a higher-level element, use a descendants selector that consists of the higher element, space, and the descendant element.
  • To select a sibling element that is adjacent to another element, use an adjacent sibling selector that consists of the first element, a plus sign (+), and the sibling element.
  • To select element only when they are child elements of the parent element, you can use a child selector that consists of the parent element, the greater than sign (>), and the child element.
  • To select any elements that are siblings to another element, you can use a general sibling selector that consists of the first element, a tilde (~), and the sibling element, but this can only be used by browsers that support CSS3.

Complete HTML Example

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
	  #main li {font-size: 14pt;}
	  ul a {color: red;}
	  
	  h2+p {margin-top: .5em;}
	  
	  #main>p {color: green;}
	  
	  h2~p {margin-left: 2em;}
	</style>
</head>
<body>
  <h1>CSS Relational Selectors</h1>
   <section id="main">
        <h1>Summer 2019 Town Hall Speakers</h1>
        <ul class="speakers">
            <li>June 20, 2019: <a href="#">David Bran</a></li>
            <li>July 15, 2019: <a href="#">Robert Dsouza</a></li>
            <li>Aug 17, 2019: <a href="#">Juan William</a></li>
        </ul>
        <h2>Post-lecture Luncheons</h2>
        <p>Extended the excitement by going to the luncheon</p>
        <p>A limited number of tickets are available.</p>
        <p><em>Contact us by phone</em> at (559) 123-1212</p>
    </section>
</body>

</html>

Output

As shown in the featured image of this article.

See also: