CODEWITHSUNDEEP
htmlcss
Vinnie Van Rooij
Vinnie Van Rooij

Reputation: 121

Overwriting CSS markup to cancel current markup

For the website I have to maintain I need to add a bit of CSS. Unfortunately, there are some legal issues between my company and the company that build the website. This means I have no access to the files on the server. However, I have a built-in option to add custom CSS that is loaded inline in the header.

The current CSS theme file has this line:

@media (min-width: 769px)
.account-page .address-item:nth-child(3n+1), .account-page .order-item:nth-child(3n+1), .account-page .request-item:nth-child(3n+1) {
    margin-left: 0;
    clear: both;
}

This needs to be changed from (3n+1) to (2n+1). So I tried to re-write the CSS and put it into the custom CSS field.

.account-page .address-item:nth-child(2n+1) {
margin-left: 0;
clear: both;
}

This works good, but doesn't cancel out the other CSS. The style given in the code above is effective on the 1st and 2rd item (which is good) but (thanks to the original code in the theme file) its also effective on the 4th item.

I tried to add:

.account-page .address-item:nth-child(3n+1) {

}

But it doesn't do anything. Both the items mentioned in the original piece of CSS (margin-left and clear) are not mentioned in the other items, so I wouldn't know what value to give them.

Does anybody know a method how I can completely cancel out the first CSS code without editing the original CSS theme file?

Upvotes: 1

Views: 102

Answers (3)

Perry Clark
Perry Clark

Reputation: 29

To make your values override the originals, you need to add !important to the end of the values like the bellow snippet. The !important rule is a way to make your CSS cascade but also have the rules you feel are most crucial always be applied. A rule that has the !important property will always be applied no matter where that rule appears in the CSS document.

.account-page .address-item:nth-child(3n+1) {
    margin-left: auto !important;
    clear: none !important;
}

Upvotes: 0

Marko.dev
Marko.dev

Reputation: 328

If you want to override your css, without changing current values, copy the selector and set values to default like this 

.account-page .address-item:nth-child(3n+1) {
margin-left: auto;
clear: none;
}

this selector should be under the first one, if it still has no try this 

.account-page .address-item:nth-child(3n+1) {
margin-left: auto!important;
clear: none!important;
}

Upvotes: 1

Moher
Moher

Reputation: 741

you should do this:

.account-page .address-item:nth-child(3n+1) {
    margin-left: auto!important;
    clear: none!important;
}

add this to the end of the file

Upvotes: 1

Related Questions