CODEWITHSUNDEEP
htmlcss
Steven Matthews
Steven Matthews

Reputation: 11275

Overriding an id

So I'm working on a project with three other programmers (two of which are more advanced than me), so simply changing the structure/names is not really a workable solution.

We have an id called head_subhead, with some styles applied to it.

All of the pages used this template (it is in Drupal), and thus all pages have head_subhead in the structure.

I would like to, for a specific page(s) override #head_subhead.

I would like to do this without adding an id to the page body, or higher element. Could I do this by adding an additional class? Could I use the class already applied to the page body (i.e., .pagename #head_subhead) or would that be useless?

What's the most efficient way to override #head_subhead, without using !important

Upvotes: 2

Views: 217

Answers (4)

Nabbit
Nabbit

Reputation: 825

Could I use the class already applied to the page body

Yes you could, if you're only targeting that page.

.page_body_class #head_subhead { /* CSS */ }

You could also target parent divs if they are unique to the page/pages you want the css to affect.

.some_parent_div_class #head_subhead { /* CSS */ }

But if you're going to use this often, just add a class to the head_subhead element.

#head_subhead.extra_class { /* CSS */ }

Upvotes: 3

Joel Fischer
Joel Fischer

Reputation: 6597

The issue here is that you must use a greater specificity. You can do this by having the overridden css selector be called after the original one, whether it's further down the same file (why), or within a separate file that's included after the original css selector is created.

Alternately, you can create greater specificity by using additional selectors, such as a descendant selector like: .superclass #id. You could put a special class on the body of the page you need the special style on, and use that as the .superclass part of that selector, for instance.

Really though, this is why I do not use ids at all within my css code. Using classes everywhere is a much better solution (I know you said this isn't feasible for your situation, just giving my 2 cent opinion on the topic).

Upvotes: 1

Blowfish
Blowfish

Reputation: 130

Don't use !important to override your styles, you will find it difficult to handle your stylesheet, using id, your selector will have higher preference compared to class. If you want to override the id, use more specific selector like

#head_subhead .class p {
   styles here
}

Assign the class to your element you want to select, you can keep adding more and more elements, classes or ids just to make your selector more specific.

Upvotes: 2

Afzaal Ahmad Zeeshan
Afzaal Ahmad Zeeshan

Reputation: 15860

Adding a class won't do the trick ID is of higher priority. You can even see that https://stackoverflow.com/tags/css/info here.

Without using anything there will be only one answer, remove the id! Other methods are already being denied by you! Such as !IMPORTANT, adding ID or class to parent. Then remove the id to prevent it. Or atleast use this

<element id="@if(condition == true) {<text>head_subhead</text>}"></element>

Apply the if else block to only show the id when some condition is true; which in your case means to be shown only in specific pages.

I am sorry I used ASP.NET code, you can yourself change the code type to your own. And you'll get rid of the id where it is not required!

Upvotes: 0

Related Questions