Disallow qualified headings

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



 

Using qualified headings compromises the predictability of your design. If someone else were to pick up your design and tried putting in a heading somewhere, they would need to be aware of the context and placement of the element.

/* Qualified heading with unpredictable heading styling */
.foo h1 {
  font-size: 50px;
}
.bar h1 {
  font-size: 30px;
}

With headings defined unconditionally, a developer can use a heading anywhere confident of its presentation, regardless of its parents.

/* Predictable (site wide) heading styling */
h1 {
  font-size: 40px;
}

How do I fix this ?

Remove heading qualifiers and make heading styles consistent across your site.

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