CODEWITHSUNDEEP
htmlcss
ohadinho
ohadinho

Reputation: 7144

Simple css override

I have the following css:

.wrapper {
    display: inline-block;
    margin-top: 60px;
    padding: 15px;
    width: 100%;
}

I want to create another class which inherit all wrapper properties and overrides the width property:

.wrapper .extended {
    width: 150% !important;
}

And tried to use that in my HTML like:

<section class="wrapper extended">

But unfortunately that doesn't work.

How can I correct my code ?

Upvotes: 1

Views: 79

Answers (4)

akash
akash

Reputation: 2157

Remove space between .wrapper .extended class

.wrapper.extended {
    width: 150% !important;
}

css selectors

Upvotes: 2

Ivin Raj
Ivin Raj

Reputation: 3429

Remove space between .wrapper .extended class

Please add this method .wrapper.extended

And css like this:

.wrapper.extended {
    width: 150% !important;
}

Hope it is clear.

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167250

They are two classes of same element. Remove the space:

.wrapper.extended {
    width: 150% !important;
}

Giving .wrapper .extended means, you are selecting a child .extended under .wrapper. Giving .wrapper.extended is you are selecting an element with both .wrapper and .extended classes. Hope it is clear.

Upvotes: 3

Saswata Sundar
Saswata Sundar

Reputation: 586

You can't add a space between these 2 classes. .wrapper .extended

It will be considered as it's child element, but it is not. Use this

.wrapper.extended {
    width: 150% !important;
}

Upvotes: 1

Related Questions