CODEWITHSUNDEEP
javascriptcss
O.Chounry
O.Chounry

Reputation: 322

How to make an element's CSS NOT inherit from others?

enter image description here I want the element to use only css that are in the "A" section and ignore the "B" section.

Is it possible?If javascript can do this, How?

Thanks you.

Upvotes: 0

Views: 78

Answers (2)

Martijn
Martijn

Reputation: 16103

You can not do that with the example you've provided. The C in CSS stands for Cascading, the styling rules cascade down the DOM tree.

You have to reset the styling of the element to what you want with a more specific selector, e.g. #Examplewrapper input{}. By using a more specific selector, it'll overwrite/suplement the previous styling, without the need for !important.

Alternatively, you can set the most upper selector more specific, e.g. #content input{}. This way, when you place a form in the #footer, it will not have the styling, as #content doesn't have a #footer in it (it cant cascade).

I do recommend to define a general input as you have. This way, all forms have the same font, size and styling throughout your website. If you want another color border, you only have to change that one settings. This is the way many (profesional) sites work, because it is the most efficient.

Upvotes: 1

hsz
hsz

Reputation: 152206

This is how the inheritance works. You can only overwrite styles if others are set globally (i.e. for all input elements).

You can always limit the global styles of input with some classname, like input.myStyle so the raw input will have no styles set.

Upvotes: 0

Related Questions