Which css style can override other?

Question

An element can have an id and many classes. So, i want to know which style (#id or .class1 or .class2 ) overrides which other styles.

https://code.sololearn.com/WT2uHsriiMlk/?ref=app

Answer 1

Sameer Crestha
See this page for more details:
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Answer 2

Sameer Crestha
I think the order in which you place them is important. As the css file renders from top to bottom the latest style would be applied.

For Ex.
---------
#id{
border: 1px solid #222;
}
.class{
border: 2px solid red;
}
--------
In this case the style defined by .class will be applied and creates a 2px wide red coloured border.

Answer 3

If #child style applied to a child & #parent style applied to it's parent , which overrides?or does it happens per order too?

Answer 4

Sameer Crestha
If you select them with their ids and apply those styles, they will applied seperately i.e. parent styles doesn't effect child.
like:

Ex.
HTML
-------
<div id="parent">
<div id="child"></div>
</div>
-------

CSS
-------
#parent{
border: 1px solid #222;
}
#child{
border: 2px solid red;
}
-------
Result:
Child will have a 2px wide red border.

Interestingly enough, when you select the #child element as a child of the #parent element, it doesn't care about order:

CSS
-------
#parent div{
border: 1px solid #222;
}
#child{
border: 2px solid red;
}
--------

Result:
The child element has a 1px wide black border.
Even though the #child element is specifically selected and placed below, the styles defined by #parent div{} are applied to #child element.

See this code:

https://code.sololearn.com/W2UOK5pT6AWx/?ref=app