CODEWITHSUNDEEP
css
bobo2000
bobo2000

Reputation: 1877

How to override a property set in an id (CSS)

Suppose the following code:

<div id="body" class='bodyLogin'>

#body {
    background-color: red;
}

I would like to override the background colour through the class attribute, like this:

#body .bodyLogin {
    background-color: blue;
}

but this doesn't work.

Similarly:

.bodyLogin  {
    background-color: blue;
}

doesn't work due to CSS hierarchy.

Upvotes: 1

Views: 43

Answers (1)

Jeroen
Jeroen

Reputation: 63719

The space between your two selectors is meaningful. In fact it is a selector: the descendant selector. It means you select all of class bodyLogin descendant of an element with id body.

Get rid of the space and you select elements that are both #body and .bodyLogin:

#body {
    background-color: red;
}

#body.bodyLogin {
    background-color: blue;
}
<div id="body" class='bodyLogin'>Test</div>

Upvotes: 2

Related Questions