[SOLVED] How do you cancel the application of a class to a single HTML element/selector?

I need help applying the class .container-fluid { padding: 50px; } with the exception of it applying to one “container-fluid”. Is it possible to apply a class but negate the effect on one particular element/selector?

Reason I’m asking: When I make my navbar have the class container-fluid the padding that gets applied runs over and covers up way too much content on my first page. But I like the effect of what fluid achieves, AND I need the padding that gets added elsewhere throughout my webpage.

Any thoughts on how to get the best of both worlds?

Here’s my pen I’m working with: http://codepen.io/kris-lyle/pen/WpRoOW?editors=1100

FWIW I’ve tried adding jQuery :not() selector but it’s not overruling .container-fluid { padding: 50px; }. I’ve left it in my code for you to see. Any thoughts are welcome!

 $("div:not(.noPadding)").css("padding", "0px");
 });

You can just add to your css:

.noPadding {
  padding: 0;
}

Or if you want to do it dynamically:

const padding = 10;

document.querySelector('.noPadding').style = `padding: ${padding}`;
1 Like

This is just margin

#about{
margin-top: 100px;
}

Sorry I didn’t read the question all the way.

Define an ID on the same element that has container-fluid and set its padding rule there. ID rules overwrite class rules.


HTML

div id=navBarSection class=“container-fluid noPadding”


CSS > #navBarSection{ > padding-top: 0px; > padding-bottom: 0px; > }

I feel really stupid, because I swear I (should) have tried that. But you’re right: that worked!

FWIW I don’t understand the dynamic way. Is that JS or JQuery? I’ve only been digging into HTML and CSS, if so.

Ugh, I also feel really dumb here. I had tried to overwrite the class with an id before, but now I realize I was applying the id to the wrong div (i.e. one that already had an id… and I don’t think you can have two ids for one selector, right?).

It’s JS.
If you haven’t started JS yet, just ignore it.

Right, IDs are unique to their elements and vice versa.

You shouldn’t have two IDs on a single element nor should you have two elements sharing the same ID.

1 Like