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

#1

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");
 });
#2

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
#3

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; > }
#4

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.

#5

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?).

#6

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

#7

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
#8