Which class will be applied to div and why?

Vinit Desai

I came across a interesting code. If we run the below code snippet, green class will be applied for both the divs. Can anyone explain why?

.orange {
    color: orange;
}
.green {
    color: green;
}
<div class="orange green">Div 1</div>
<div class="green orange">Div 2</div>   

Jack Bashford

The reason is because CSS is Cascading, so rules are applied according to how far down the file they are. If you switched .orange to the bottom, you would have both <div>s with orange text, and therefore with the class taking priority being orange.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Which attribute is applied if both id and class are specified for an element and why?

From Dev

Get the class on which the annotation is applied

From Dev

why css class not applied in checkbox?

From Dev

Why the `div` which I add the `class` `.display_none` is not hide?

From Dev

Why is the "hidden" class applied to an element BEFORE it is clicked?

From Dev

Why is my css Class not being applied consistently?

From Dev

Why the style is not applied to the class Angular 5

From Java

Why is this function being applied to a variable which is not called as a parameter?

From Dev

CSS class will be applied different to div element and different to button element

From Dev

css class being applied to entire page instead of that particular div

From Dev

Why is d3.select().style() not applied to <div>-elements?

From Dev

The class is added to the HTML element, but the CSS rules are not applied at all. Why?

From Dev

Why can't @SafeVarags be applied to instance methods in a final class?

From Dev

Why can't @FunctionalInterface be applied to a SAM abstract base class

From Dev

Why is my color class not being applied to my <p> text?

From Dev

How to apply css to div which has no class?

From Dev

Show() div which has class 'hide' in jQuery

From Dev

Find div class, which contain word

From Dev

Hide a specific Div which have no class with Jquery

From Dev

Why <div class="clear"></div> used?

From Dev

Why <div class="clear"></div> used?

From Dev

Which way of creating class attributes is better and Why?

From Dev

Which way of creating class attributes is better and Why?

From Java

Why can the keyword "weak" only be applied to class and class-bound protocol types

From Dev

Context cannot be applied to a class

From Dev

"Cannot be applied to" in a fragment class

From Dev

WPF: Which properties are applied to the ControlTemplate

From Dev

Why is apply not being applied

From Dev

Why is SFINAE not applied in this example?

Related Related

  1. 1

    Which attribute is applied if both id and class are specified for an element and why?

  2. 2

    Get the class on which the annotation is applied

  3. 3

    why css class not applied in checkbox?

  4. 4

    Why the `div` which I add the `class` `.display_none` is not hide?

  5. 5

    Why is the "hidden" class applied to an element BEFORE it is clicked?

  6. 6

    Why is my css Class not being applied consistently?

  7. 7

    Why the style is not applied to the class Angular 5

  8. 8

    Why is this function being applied to a variable which is not called as a parameter?

  9. 9

    CSS class will be applied different to div element and different to button element

  10. 10

    css class being applied to entire page instead of that particular div

  11. 11

    Why is d3.select().style() not applied to <div>-elements?

  12. 12

    The class is added to the HTML element, but the CSS rules are not applied at all. Why?

  13. 13

    Why can't @SafeVarags be applied to instance methods in a final class?

  14. 14

    Why can't @FunctionalInterface be applied to a SAM abstract base class

  15. 15

    Why is my color class not being applied to my <p> text?

  16. 16

    How to apply css to div which has no class?

  17. 17

    Show() div which has class 'hide' in jQuery

  18. 18

    Find div class, which contain word

  19. 19

    Hide a specific Div which have no class with Jquery

  20. 20

    Why <div class="clear"></div> used?

  21. 21

    Why <div class="clear"></div> used?

  22. 22

    Which way of creating class attributes is better and Why?

  23. 23

    Which way of creating class attributes is better and Why?

  24. 24

    Why can the keyword "weak" only be applied to class and class-bound protocol types

  25. 25

    Context cannot be applied to a class

  26. 26

    "Cannot be applied to" in a fragment class

  27. 27

    WPF: Which properties are applied to the ControlTemplate

  28. 28

    Why is apply not being applied

  29. 29

    Why is SFINAE not applied in this example?

HotTag

Archive