Member Avatar for gurupts

Is there any chance, a div call a particular css and its class. when i include two css on my html header both are have some same class.In case i have css1
.h1 text-align:center;color:red;
and css2
.h1 text-align:left;color:blue;.Now i need to call cssl from a div with h1 class in css1.

  • 3 Contributors
  • 4 Replies
  • 231 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by rotten69

Dani AI

Generated

For : an element cannot "choose" a stylesheet. The browser loads every linked stylesheet and whatever selectors match the element are considered together — the declaration that actually wins depends on selector specificity and the cascade. The practical fixes are to give the element a selector that uniquely identifies which file should style it, or to make the selector that must win more specific and module-scoped.

Namespace or scope the rules in the stylesheet and wrap the markup with that namespace. This keeps both files usable without collision:

/* css1.css */
.moduleA .title {
  text-align: center;
  color: #b22222;
}
<div class="moduleA">
  <div class="title">Heading</div>
</div>

Give elements a distinct modifier class (BEM-style) so the intent is explicit and maintainable:

<div class="title title--moduleA">Heading</div>
/* css1.css */
.title--moduleA { color: #b22222; }

If changing selectors in the CSS files is impossible, other options (in descending preference) are: add a page/module wrapper and write a more specific rule that targets it; use an ID selector for a single element; or as a last resort use inline styles or an override. As noted, forcing rules makes overrides possible but brittle — reserve such tactics only when refactoring or namespacing is not an option. A quick troubleshooting step is to inspect the element in browser devtools to see which stylesheet and selector currently wins; that reveals whether you need higher specificity, a different selector, or a scoped class.

For long-term maintainability avoid naming classes after HTML tags (for example, using .h1); prefer semantic tags (<h1>) and modular naming (BEM or namespace prefixes) so different CSS files do not collide. This addresses the confusion raised by about competing declarations and keeps styles predictable.

Recommended Answers

All 4 Replies

Member Avatar for JorgeM

I suspect the best approach is if you are unable to have unique classes and ids, then if you need to ensure that a specific style is applied, use the "!important" rule to ensure that the styles you need to ensure are applied, do get applied. Styles are normally applied in order as they are read by the browser. So for example,

.h1 {text-align:center;color:red !important;}
.h1 {text-align:center;color:blue;}

In this example, the color red will be applied regardless of the order the styles come into the browser.

Member Avatar for rotten69

.. so what happens to the blue colour in this case? I never used the !important rule.

Member Avatar for JorgeM

The blue is not applied. The !important will stick.

Member Avatar for rotten69

I don't get why someone would even bother defining a second colour... Is that in the case where if a colour that has !important rule defined on, fails then the second colour will be applied automatically?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.