How to Access Two Ids in One CSS Selector?

Last Updated : 17 Sep, 2024

In CSS, an ID is a unique identifier that is assigned to an HTML element, it is used to target and style a specific element on the web page in CSS selectors are also used to target HTML elements for styling and ID is one type of selector.

These are the following approaches to access two IDs in one CSS selector:

Table of Content

Using Comma (",") Separator
Using Descendant Selector for Nested IDs
Using Adjacent Sibling Selector for Adjacent IDs

Using Comma (",") Separator

First, create a basic HTML structure where you create two separate div elements and then provide them with different IDs.
On this page, you can add some other optional content.
Then in the CSS code access the two different IDs using a comma(",") separator and apply the same style to them.

Example: The example code below shows how to access two IDs in one CSS selector using the Comma (",") Separator.

HTML

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>Multiple IDs - Same Style</title>
    <style>
        #first-container,
        #Second-container {
            background-color: #4CAF50;
            color: white;
            text-align: center;
            padding: 20px;
            width: 200px;

        }
    </style>
</head>

<body>

    <div id="first-container">
        <h1>Welcome to My Website</h1>
        <p>This is the first section of the webpage.</p>
    </div>

    <div id="content">
        <p>This is the main content of the page.</p>
    </div>

    <div id="Second-container">
        <p>This is the second section of the webpage.</p>
    </div>

</body>

</html>

Output:

Using Descendant Selector for Nested IDs

First, create a basic HTML structure where you create a some div's elements then provide them a different id's.
And in this page you can add some other content also that is optional.
Then in the CSS code access the two different ID's using descendant Selector and apply the same style on them.

Example: The example code below shows how to access two Ids in one css selector using descendant Selector.

HTML

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>Nested IDs - Different Style</title>
    <style>
        #section1 #subsection {
            background-color: lightblue;
            border: 2px solid blue;
            padding: 10px;
            text-align: center;
            width: 200px;
        }
    </style>
</head>

<body>

    <div id="section1">
        <h2>Main Section 1</h2>
        <div id="subsection">
            <p>This subsection is styled because it is inside section1.</p>
        </div>
    </div>

    <div id="section2">
        <h2>Main Section 2</h2>
        <div id="subsection">
            <p>This subsection is not affected
               because it is not inside section1.</p>
        </div>
    </div>

</body>

</html>

Output:

Descendant-Selector-for-Nested-IDs — Output : Using Descendant Selector for Nested IDs

Using Adjacent Sibling Selector for Adjacent IDs

First, create a basic HTML structure where you create a some div's elements then provide them a different id's.
And in this page you can add some other content also that is optional.
Then in the CSS code access the two different ID's using adjacent sibling selector for adjacent IDs and apply the same style on them.

Example: The example code below shows how to access two Ids in one css selector using adjacent sibling selector for adjacent IDs.

HTML

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>Adjacent Sibling Selector</title>
    <style>
        #nav+#content {
            background-color: #FF9800;
            padding: 15px;
            border: 2px solid red;
            width: 200px;
        }
    </style>
</head>

<body>
    <div id="nav">
        <h1>Navigation</h1>
        <p>This section is styled differently.</p>
    </div>

    <div id="content">
        <h1>Main Content</h1>
        <p>This section is styled because it
           follows the navigation section.</p>
    </div>
</body>

</html>