What are some strategies for disregarding global CSS styles?

Question

What are some strategies for disregarding global CSS styles?

I am facing an issue on my html page with a specific div structure. The

<div id="container">/* lots of nested html with elements like div, ul, li etc */</div>

is causing some trouble in my global css file called style.css.

The style.css includes rules for various HTML elements like body, div, ul, li, h1, h2, p, and more by setting margin and padding to 0. However, I want to exclude the mentioned div from these globally applied styles and only apply them to the rest of the elements on the page.

How can I achieve this without affecting the styling of other elements?

html css

Answer 1

Answer №1

Combining the effects of CSS selectors like ":not" and ":is" can be quite simple. Check out this example to see how it works.

:is(body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td):not(#container *) {
    margin: 0;
    padding: 0;
}

<div id="container">
  <ul>
    <li>Inside</li>
    <li>The</li>
    <li>Container</li>
  </ul>
</div>

<ul>
  <li>Outside</li>
  <li>The</li>
  <li>Container</li>
</ul>

By running the snippet, you'll notice that the styles are not applied to the list inside the container. This is achieved by selecting elements with the ":is" selector and then deselecting the children of the "#container" using the ":not" selector.

Answer 2

Combining the effects of CSS selectors like ":not" and ":is" can be quite simple. Check out this example to see how it works.

:is(body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td):not(#container *) {
    margin: 0;
    padding: 0;
}

<div id="container">
  <ul>
    <li>Inside</li>
    <li>The</li>
    <li>Container</li>
  </ul>
</div>

<ul>
  <li>Outside</li>
  <li>The</li>
  <li>Container</li>
</ul>

By running the snippet, you'll notice that the styles are not applied to the list inside the container. This is achieved by selecting elements with the ":is" selector and then deselecting the children of the "#container" using the ":not" selector.

What are some strategies for disregarding global CSS styles?

Answer №1

Similar questions

Transparent CSS Table Styling

Switching up the content of an HTML page with JavaScript or JQuery: what you need

What is the reason that custom styling for a single react component instance does not function properly?

Ways to divide background color in half using CSS

Click to position custom text on image

Combining the p class with flexbox for optimal layout design

Slider with Dual Images: A Visual Comparison

How to target CSS when a DIV does not have a particular sibling

The Tab style in Mobile Angular UI does not get applied correctly when nested within an ng-repear

Padding in Bootstrap rows is not uniform

Extract data from the HTML source code in JavaScript and transfer it to a personalized JavaScript variable within Google Tag Manager

The alignment of elements in the div seems to be slightly skewed

Revolutionary CSS and jQuery for an Exceptional Top Navigation Experience

What is the best way to create a mirrored effect for either a card or text using CSS

Develop a custom script function for every instance of a @foreach loop

Trouble with addClass function not functioning properly on dynamically generated list items while using search feature in Laravel 5

Creating a responsive design for a centered image with absolute positioning

What could be causing my sticky positioning to not function properly when I scroll outside of the designated

Assign a value to a jQuery variable from user input

Bootstrap allows for multiple items to be displayed on the same line, creating