CODEWITHSUNDEEP
htmlcss
minimum
minimum

Reputation: 33

Why class element nested in ID doesn't overwrite class element in other css file?

I have a problem. Why does color definition in style.css not overwrite this one nested in ID: #main-nav?

HTML

<head>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div id="main-nav" class="navbar-default" role="banner">
content
</div>
</body>

bootstrap.css

.navbar-default {
color: black;
}

style.css

#main-nav .navbar-default {
color: white;
}

What is interesting If I change code as below:

style.css

.navbar-default {
color: white;
}

Color parameter has changed. Can someone explain me why first way with ID doesn't work?

Upvotes: 3

Views: 80

Answers (4)

Mohit Raj Purohit
Mohit Raj Purohit

Reputation: 265

Okay, so the main problem here is the selector which you are using.

Your selector

#main-nav .navbar-default {
color: white;
}

which means it sets the color white for element having class .navbar-default and also the parent #main-nav

But in your case the .navbar-default itself having the id #main-nav not its parent. That is why your selector is not working as required by you.

You need to change your code as follows to work

  #main-nav.navbar-default {
    color: white;
    }

Upvotes: 1

Shaggy
Shaggy

Reputation: 6796

You are using a descendant selector in your style.css file, meaning that your CSS is looking for a descendant of an element with ID #main-nav that has a class of .navbar-default when what you're really trying to select is an element with ID #main-nav that also has a class of .navbar-default so, to solve your issue, simply remove the descendant selector (i.e., the space), giving you:

#main-nav.navbar-default

You might also want to read up on CSS specificity.

Upvotes: 2

Nutshell
Nutshell

Reputation: 8537

The main-nav id #main-nav is on the same element as the navbar-default class .navbar-default

So to select it with CSS, you can use 

#main-nav.navbar-default {
  // your code
}

Fiddle

Upvotes: 1

Naqash Malik
Naqash Malik

Reputation: 1816

Replace this line:

#main-nav .navbar-default

With this:

#main-nav.navbar-default

Upvotes: 5

Related Questions