Reputation: 24788

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

I have this:

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
        <title>My Social Network</title>
    </head>
    <body>
        <div id="best_friend" class="friend" ></div>
        <div class="family"></div>
        <div class="enemy" id="archnemesis"></div>

    </body>
</html>


div {
    display: inline-block;
    margin-left: 5px;
    height: 100px;
    width: 100px;
    border-radius:100%;
    border: 2px solid black;

}

#best_friend {
 border: 4px solid #00C957;   
}

.friend {
 border: 2px dashed #008000;   
}

.family {

 border: 2px dashed #0000FF;   

}

.enemy {
  border: 2px dashed #FF0000;   

}

#archnemesis {
 border: 4px solid #CC0000;   
}

My question is: Notice how I define border for both class and id. The border that is applied is the one coming from the id. Why so? Why is the border specification in id overriding the one in class.

Upvotes: 3

Answers (6)

EternalHour

Reputation: 8681

The browser determines which styles to apply in what order based on Specificity, the higher number determines which will be applied.

Universal selectors have a specificity of 0,0,0,0.
* = 0

HTML selectors have a specificity of 1.
p, div, etc.. = 1 each

So each HTML selector adds to the specificity.
div p = 2, div p span = 3

Class selectors have a specificity of 10.
.class = 10

Class selectors combined with HTML selectors.
div p.class = 12

ID selectors have a specificity value of 100.
#id = 100

ID selectors combined with HTML selectors.
#id div = 101

!important overrides all other styles unless combined with another selector. table td {height: 50px !important;} Would override any height style applied to only a td within a table.

Inline styles have the highest specificity of 1000.
style= = 1000

Useful resources

CSS Specificity: Things You Should Know
Specificity | HTML Dog

Upvotes: 2

Drakes

Reputation: 23670

Without including exceptions (e.g. :not, !important), the following list of selector types is by increasing specificity:

specificity

Universal selectors (e.g., *) (lowest)
Type selectors (e.g., h1)
Class selectors (e.g., .example)
Attributes selectors (e.g., [type="radio"])
Pseudo-classes (e.g., :hover)
ID selectors (e.g., #example)
Inline style (e.g., style="font-weight:bold") (highest)

Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

The border that is applied is the one coming from the id. Why so? Why is the border specification in id overriding the one in class.

From this list, you can see that id is higher than class, so the border set in id will be applied.

Upvotes: 2

naim shaikh

Reputation: 1111

Specificity hierarchy

Every selector has its place in the specificity hierarchy. There are four distinct categories which define the specificity level of a given selector:

Inline styles (Presence of style in document). An inline style lives within your XHTML document. It is attached directly to the element to be styled. E.g. <h1 style="color: #fff;">
IDs (# of ID selectors) ID is an identifier for your page elements, such as #div.
Classes, attributes and pseudo-classes (# of class selectors). This group includes .classes, [attributes] and pseudo-classes such as :hover, :focus etc.
Elements and pseudo-elements (# of Element (type) selectors). Including for instance :before and :after.

Ref:http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

and here : http://fourword.fourkitchens.com/article/css-specificity-id-overrides

Upvotes: 1