CODEWITHSUNDEEP
csspropertieselementreset
vega
vega

Reputation: 127

How to remove/reset/not inherit the CSS properties of a DIV/element/... within the same CSS document?

I have a certain line in my CSS file, which declares some properties needed to design the navigation on a normal desktop computer.

For desktop:

#nav li:hover > a, #nav ul ul:hover > a {color: #bbb; background: rgba(255, 255, 255, .95);}

By using media queries I want to redesign the navigation, when the website is being looked at in a mobile device. So far, so good.

My problem is now, that the media queries which follow-up later in the CSS document inherit those values above, when in fact I just need them gone. I need to have NO hover effect in that navigation drop-down (because iOS Safari does not like hover).

So, I tried just an empty input like:

For mobile:

#nav li:hover > a, #nav ul ul:hover > a {}

But that did not work. It still shows the behaviour of the above-mentioned #nav li:hover > a, #nav ul ul:hover > a.

To cut a long story short, how do I get #nav li:hover > a, #nav ul ul:hover > a {} empty, rid of it or not to inherit the values from above in the CSS file?

Btw, I can not change code on the navigation, because it is generated by Wordpress. Thank you very much in advance, guys.

Upvotes: 2

Views: 375

Answers (3)

Marventus
Marventus

Reputation: 874

The way I see it, you have two main ways of accomplishing this:

  1. Loading a different stylesheet if mobile device is detected;
  2. If you would like to override pseudo-elements that have already been styled, you can set the same values for hover state as you had for normal state, and override non-mobile styles with !important (if needed) through media queries. For example:

Regular styles:

#nav li > a, #nav ul ul > a {
    background: rgb(255, 255, 255);
    color: #bbb;
    transition: background 0.5s, color 0.5s;
}
#nav li:hover > a, #nav ul ul:hover > a {
    background: rgba(255, 255, 255, .95);
    color: #ccc;
}

Mobile Styles:

@media (max-width: 600px) {
    #nav li > a, #nav ul ul > a {
        transition: none!important;
    }
    #nav li:hover > a, #nav ul ul:hover > a {
        background: rgb(255, 255, 255)!important;
        color: #bbb!important;
    }
}

Option 1 would be best if you need to make a lot of modifications to the original stylesheet, and option 2 if you only need to adjust a few things.

Upvotes: 1

4dgaurav
4dgaurav

Reputation: 11506

  1. Load different stylesheets

    <link rel='stylesheet' media='screen and (max-width: 779x)' href='mobile.css' /> <link rel='stylesheet' media='screen and (min-width: 780px)' href='desktop.css' />

  2. as commented by @Hashem / @emmanuel answer

  3. override in your media queries

    #nav li:hover > a, #nav ul ul:hover > a { color: /* your color for mobile */ ; background: /* your background for mobile; */ ; }

Upvotes: 3

emmanuel
emmanuel

Reputation: 9615

You can't remove a rule, you could just override it with a more specific selector.

Another option if you are using media queries is to include desktop rule in a media query and get enabled only to the specified dimension like:

@media (min-width: 1024px) {
  #nav li:hover > a, #nav ul ul :hover > a {
     color: #bbb;
     background: rgba(255, 255, 255, .95);
  }
}

Upvotes: 2

Related Questions