How To Select Multiple Id In CSS

When designing a webpage, you often encounter situations where you want to style multiple elements under the same ID.

CSS is equipped with a feature that allows you to select and style multiple ID selectors efficiently. In this tutorial, we will guide you through the process of selecting multiple IDs in CSS with a step-by-step approach. By the end of this tutorial, you will be able to apply styles to multiple IDs with ease.

Step 1: Understand the ID selector

The **ID selector** in CSS is used to target a specific element on the page with a unique identifier. The ID attribute is defined using the id attribute, and the ID selector in CSS is denoted by a hashtag (#) symbol followed by the ID name.

For example, suppose we have a paragraph with an ID of “intro” and we want to style it. The CSS code would look like this:

Step 2: Target multiple IDs in a single line

To apply the same style to multiple IDs, simply list the IDs by separating them with commas. This is called a **grouped selector**.

For instance, if you have three paragraphs with IDs “intro”, “main”, and “footer”, and you want to apply the same style to all of them, your CSS code should look like this:

Step 3: Apply different styles to multiple IDs

It is possible that you want to apply different styles to multiple elements with distinct IDs. To do this, list the styles for each ID separately.

For example:

Step 4: Use multiple ID selectors for more specific targeting

In some cases, you might need to target an element that has a certain ID and is a child of another element with a different ID. You can do this with the help of **descendant selectors**. Just use a space between two ID selectors to target the child element.

For example, suppose you have a <div> element with an ID of “container” and a paragraph inside it with an ID of “main”. You can apply styles only to the “main” paragraph inside the “container” <div> like this:

Full code example

Output

Conclusion

Now you know how to select multiple IDs in CSS and apply various styles to them efficiently. With a little practice, you can manipulate your CSS code to target specific elements on your webpage and improve the overall design of your site.