CODEWITHSUNDEEP
css
cade galt
cade galt

Reputation: 4161

Is it possible to not have a CSS rule inherit?

So I use this rule in the body selector:

body {
  text-align:center
}

and it inherits down to what looks like everywhere that I use text. Is there a way to tell CSS I don't want this rule to inherit?

I only want the body centered.

Upvotes: 3

Views: 471

Answers (2)

Quentin
Quentin

Reputation: 943142

and it cascades down to what looks like everywhere that I use text.

No, it doesn't. It is inherited. The cascade describes how multiple rule-sets which match a given element are applied, not how a value is copied from the parent element.

Is there a way to tell CSS I don't want this rule to cascade?

The only way to stop inheritance is to set the value of the property to something other than inherit on the element you don't want to inherit it.

You could, for example, set it to left for all the child elements of the body (using a child combinator:

body > * {
    text-align: left;
}

That said, the problem is likely to be better addressed by not putting inline content directly inside the body in the first place.

Put the content in a container element (a div if nothing with better semantics presents itself) and then centre the content of that element instead.

Upvotes: 8

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167162

Do this:

body {text-align: center;}       /* Apply to Body */
body > * {text-align: initial;}  /* Reset all styles */

AFAIK, the default value of text-align is inherit, which makes the above code obsolete. So, you can add something like this:

body {text-align: center;}       /* Apply to Body */
body > * {text-align: left;}     /* Reset all styles */

Upvotes: 5

Related Questions