CODEWITHSUNDEEP
htmlcss
abgad
abgad

Reputation: 1

how to apply css on specific element by id

the template i'm using apply css on all nav and it overrides any css written for any other nav however i've written the css on this very specific nav using its id. i've read that the last css is applied and when i tried this the same result.

nav {
  width: 55%;
  float: left;
}
nav ul {
  padding: 0;
  float: right;
  padding-top: 2px;
  color:#dce3e4;
}
nav li {
  display: inline-block;
  position:relative;
  margin: 0 1px;
}
nav a {
  color: #fff;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  line-height: 40px;
}

and here is the css i'm trying to apply:

#nav > a {
  display: none !important;
}

#nav li {
  position: relative !important;
}

#nav > ul {
  height: 3.75em !important;
}

#nav > ul > li {
  width: 25% !important;
  height: 100% !important;
  float: left !important;
}

#nav li ul {
  display: none !important;
  position: absolute !important;
  top: 100% !important;
}

Upvotes: 0

Views: 86

Answers (2)

Johannes
Johannes

Reputation: 67748

In the original code there is nav (the HTML5 tag). In your added code there is #nav - an ID. Did you really use tags like <nav id="nav"> in your code? If not, you have to change that.

Edit/addition:

After seeing your code in your comment, here are some more thoughts:

  • the #nav > a rule won't be applied to that code: There is no a tag as a direct child of #nav
  • #nav li has position: relative anyway - your rule doesn't change the one above.
  • #nav li ul: There is no element in your code that this would apply to.

Maybe you have more code than you wrote in your comment to which these rules would apply. If yes, you should post your HTML code. But if that is already your complete HTML code in that nav, these are the reasons why these rules won't have any effect.

Upvotes: 1

Drew Kennedy
Drew Kennedy

Reputation: 4168

You put in a comment that your HTML structure looks like this:

<nav id="nav"> 
    <ul> 
        <li><a href="/">Design</a></li> 
        <li><a href="/">HTML</a></li> 
        <li><a href="/">CSS</a></li> 
        <li><a href="/">JavaScript</a></li> 
    </ul> 
</nav>

And you're trying to select elements like, for example:

#nav > a {
    display: none !important;
}

The > character points to elements that are immediate children of the parent. You don't have an <a> element as an immediate child of #nav, for example. This is why your css isn't being picked up.

Upvotes: 0

Related Questions