How Can I Combine Class and ID Selectors in CSS to Target Specific HTML Elements?

Combining Class and ID in CSS Selectors

When styling HTML elements, it's common to use both classes and IDs to target specific elements. In some cases, you may need to combine both criteria. Here's how to achieve that:

Querying Element with Both ID and Class

Consider the following HTML:

<div>
<p>To style this element such that it has both the "sectionA" class and the "content" ID, use the following CSS selector:</p>
<pre class="brush:php;toolbar:false">div#content.sectionA

In this selector, the "#" symbol precedes the ID, while the "." symbol precedes the class. This ensures that the CSS rule applies only to elements that meet both criteria.

Additional Notes

Remember that the order of the class and ID in the selector is significant. If you write ".sectionA#content", it will select elements with the "sectionA" class and any ID, not necessarily "content."

Alternate Approaches

Using the technique above, you can combine multiple classes or multiple IDs. However, there are alternative approaches to avoid long selectors:

1. Concat Classes: Concatenate class names like "content-sectionA" or "sectionA-content" to create a unique class. This simplifies the selector to ".content-sectionA" or ".sectionA-content."
2. Use Child Selectors: If the class applies to a child element, you can use the ">" symbol in the selector, for example: "div#content > p.sectionA."