How to Access Two Ids in One CSS Selector? Last Updated : 17 Sep, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report 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 ContentUsing Comma (",") SeparatorUsing Descendant Selector for Nested IDsUsing Adjacent Sibling Selector for Adjacent IDsUsing Comma (",") SeparatorFirst, 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:Output : Using Comma Using Descendant Selector for Nested IDsFirst, 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:Output : Using Descendant Selector for Nested IDsUsing Adjacent Sibling Selector for Adjacent IDsFirst, 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> Output:Output : Using Adjacent Sibling Selector Comment More infoAdvertise with us Next Article How to Select Text Input Fields using CSS Selector ? S skaftafh Follow Improve Article Tags : Web Technologies CSS Similar Reads How to Select the Next Element in CSS ? Combinators: When classes are combined, they become more specific. This allows you to target classes further down in your template without affecting other elements. Selectors can be combined into a combinator: Combinator of Descendent, Child, Sibling, and General Sibling. The Descendent Combinator i 3 min read How to select id that contains Meta Character in HTML ? Introduction: In the programming, a lot of times we have seen Metacharacter, before going on the main topic let's have brief info about Meta characters. These are the special characters available in the programming that has special meaning. There are several meta characters some of them are listed b 3 min read How to Select Text Input Fields using CSS Selector ? Selecting text input fields using CSS selectors means targeting <input> elements of type text in a form. This allows you to apply specific styles (e.g., font, color, borders) to those fields. This is typically done using the [type="text"] CSS attribute selector.Here we have some CSS selector t 4 min read How to use a "not equal" CSS attribute selector ? Cascading Style Sheets(CSS) fondly referred to as CSS, is a simply designed language intended to simplify the process of making web pages presentable. CSS allows you to apply styles to web pages. More importantly, CSS enables you to do this independent of the HTML that makes up each web page. CSS is 2 min read Which characters are valid in CSS class names/selectors? It is very easy to choose a valid class name or selectors in CSS just follow the rule. A valid name should start with an underscore (_), a hyphen (-) or a letter (a-z)/(A-Z) which is followed by any numbers, hyphens, underscores, letters.It cannot start with a digit, starting with the digit is accep 2 min read How to select element by ID in jQuery ? In this article, we are going to see how to select the element by its id using jQuery. To learn about this topic one should have prior knowledge about HTML, CSS, JavaScript and jQuery. Using JavaScript: This question is also solved by a popular JavaScript method called document.getElementById() whic 2 min read Like