CODEWITHSUNDEEP
htmlcss
Lewis
Lewis

Reputation: 2188

article class: does load order matter?

I have been searching the web to try and find an answer to my question but cant seem to find a direct answer. I use article classes a lot in my work, however never really needed to know whether they load in order i.e what comes first on the page.

Example

  <div id="example" article class="example1 example2 example3">
   Here's the div.
  </div>

Additionally I would like to ask, if I set a background in example 1 and set a background in example two, would the background of example 1 be there underneath example two. I guess I am asking if it would be like stacking divs on top of one another.

The reason I ask is because I have an article class with a background of an ajax loader. However I need to load an image directly ontop of the ajax loader. Its my idea of making a budget preloader without all the scripting hastle.

Thanks again!

Upvotes: 0

Views: 124

Answers (1)

deceze
deceze

Reputation: 522523

What you're asking about is the order of precedence of applying CSS rules. Simplified:

  1. It does not matter in which order you specify the classes on an element (class="foo bar baz").

  2. It does matter in which order you write the CSS declarations in your CSS file.

    foo { ... }
bar { ... }
baz { ... }

    Later rules override earlier rules.

  3. You are applying properties specified in these CSS rules to an element. An element can only have one such property, they do not "stack". If two CSS rules specify the same property, later rules overwrite that property on the element.

Example:

<div class="baz bar foo">

.foo {
    color: blue;
    border: 1px solid green;
}

.bar {
    color: black;
    border-color: orange;
}

.baz {
    color: red;
    margin: 10em;
}

Again, the order of the classes in the class="..." attribute is irrelevant. All three classes are applied to the element. First, .foo, then .bar, then .baz. The element will have the following properties, which are the result of merging the above rules:

color:        red;    # from .baz
border-color: orange; # from .bar
border-style: solid;  # from .foo
border-width: 1px;    # from .foo
margin:       10em;   # from .baz

(Note that rule precedence is actually a little more complex than that and actually depends on the specificity of the selector, but the above goes for equally specific selectors.)

Upvotes: 4

Related Questions