CODEWITHSUNDEEP
htmlcsstwitter-bootstrapcss-selectors
San
San

Reputation: 4163

In what order and how exactly the CSS classes are applied?

HTML:

<p class="text-uppercase">1 Example Text</p>
<p class="text-lowercase">2 Example Text</p>
<p class="text-capitalize">3 example text</p>
<p class="text-capitalize text-lowercase">4 EXAMPLE TEXT</p>
<p class="text-lowercase text-capitalize">5 EXAMPLE TEXT</p>

CSS:

.text-lowercase {
  text-transform: lowercase;
}
.text-uppercase {
  text-transform: uppercase;
}
.text-capitalize {
  text-transform: capitalize;
}

Output:

1 Example Text

2 Example Text

3 example text

4 EXAmPLE TExT

5 EXAmPLE TExT

I expected #4 and #5 to be

example text - first capitalize, then lowercase
Example Text - first lowercase, then capitalize

What's going on exactly?

Demo: http://codepen.io/sanspace/pen/xwOQyL (colors added for clarity)

Related: https://github.com/twbs/bootstrap/issues/17672

EDIT:

Let me add my understanding. I thought when two transformations are applied:

AbC becomes abc on applying lowercase and then abc becomes Abc on applying capitalize

However, it seems like

AbC becomes abc on applying lowercase and then the capitalize was applied to the original text. i.e. on AbC not on abc as I thought.

Can some one shed some light on this?

Upvotes: 2

Views: 287

Answers (1)

Quentin
Quentin

Reputation: 943615

CSS rules are applied in order of the cascade.

Sort according to importance (normal or important)

None of your rules are !important so that has no influence.

and origin (author, user, or user agent).

All of your rules come from the author stylesheet, so that has no influence.

Sort rules with the same importance and origin by specificity of selector

Since all your selectors consist of a single class selector, they have equal specificity, so that has no influence

Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins.

They are therefore applied in the order they appear in the stylesheet.

(The order the class names appear in the class attribute is entirely irrelevant.)

AbC becomes abc on applying lowercase and then the capitalize was applied to the original text. i.e. on AbC not on abc as I thought.

The rule describes how the raw data should be presented. An overridden rule has no effect. It doesn't undergo multiple transformations.

Some properties allow multiple effects to be applied but they do that by accepting multiple values in a single rule (e.g. text-decoration: underline overline).

Upvotes: 9

Related Questions