Disallow IDs in selectors

Rule from css under compatibility category

What is a trooper!

we have submitted your edit to the community for review! We'll review and make it live on the site in the next few hours, the internet thanks you :).

Browse another section of the knowledge base



Suggest an edit

Cancel

This rule has no content... yet.

Add content to this rule

Or just browse to view rules that have content



 

ID selectors are completely unique and therefore cannot be reused.

One of CSS's benefits is the ability to reuse style rules in multiple places. When you start out with an ID selector, you're automatically limiting that style to a single element in your html.

#issue {
  color: #ff0000;
}
<h4>Project Status:</h4>
<ul>
  <li>Launch went smoothly</li>
  <li>Orders are coming in</li>
  <li id="issue">Upstream suppliers low on stock</li>
  <!-- id can only be used once for valid html -->
</ul>

How do I fix this ?

Eventually you will end up needing or wanting to reuse the style specified with the ID, and you'll end up defining a class for that purpose. By not using IDs from the start, you allow for the maximum level of reusability with your CSS.

.issue {
  color: #ff0000;
}
<h4>Project Status:</h4>
<ul>
  <li>Launch went smoothly</li>
  <li>Orders are coming in</li>
  <li class="issue">Upstream suppliers low on stock</li>
  <li class="issue">Postal deliveries are taking longer than expected</li>
  <!-- .issue can be used multiple times -->
</ul>

Resources

Browse another section of the knowledge base



Signup icon
Ready to see how well your site scores?

Passmarked works best when you have an account. It allows you to keep a dashboard with saved data of the sites you have run through the system, we’ll alert you about important updates and you get access to the Passmarked Slack forum.

Sign up to get started