CODEWITHSUNDEEP
css
jens
jens

Reputation: 289

CSS-Specifity and CSS Inheritance (concrete question)?

i would by thankful for an official link (and section) of the specification for CSS, that explains if:

.one two h1 {color:green;font-family:arial;}  /*case 1 */
.one two h1 {color:blue;}   /*case 2*/

will result in (when evaluated by the browser)

.one two h1 {color:blue;font-family:arial;}  /*case 3*/

or will it be:

.one two h1 {color:blue;}  /*case 4*/

==>I have read a lot about inheritance, specifity, cascading etc but I still have not found for the given example which rules apply here.

In regard to specifity, both elements are equal in specifity: However the case2 will "win" as it is equal specific but the last(!!) one declared (=most specific). But does specifity always apply to the whole selector with ALL properties defined. Or only to the properties that are in "competition" (and declared in both).

thanks!!!!

Upvotes: 2

Views: 108

Answers (2)

n1313
n1313

Reputation: 21381

It will be .one two h1 {color:blue;font-family:arial;} /*case 3*/

http://www.w3.org/TR/CSS2/cascade.html#cascading-order

"Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins. Declarations in imported style sheets are considered to be before any declarations in the style sheet itself. "

Upvotes: 1

user151323
user151323

Reputation:

It will be:

.one two h1 {color:blue;font-family:arial;}  /*case 3*/

The later rules override previous CSS properties one by one.

Upvotes: 1

Related Questions