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

Choosing a single row from a Bootstrap React table

How can I prevent placeholder text from being included when submitting a form using serialize()?

What is the method to display a caret in regular HTML text with the use of JavaScript?

Adding parameters to Angular HTML element selector directives can be achieved by utilizing the directive's input properties

Learn the process of setting a timestamp using this PHP script

Attempting to build a table within a table structure

Capture the selected hyperlink and show the corresponding page title in a designated box for reference

Tips for individually collapsing dynamic accordion panels within a Vue.js v-for loop

Having trouble with the Slide Toggle menu closing unexpectedly?

A pair of buttons each displaying a unique div block

Center a sans-serif font vertically with exact precision while adjusting the font size

Discover the Magic Trick: Automatically Dismissing Alerts with Twitter Bootstrap

CSS Class Returns to Inactive State

Extract information from the table using $_POST

The necessary min-width for the media query has not been implemented

The image fails to load once the AI-generated image is complete and the response process has concluded

Where should you incorporate Jquery within a PHP-heavy webpage?

Tips for Ensuring Consistent Logo Appearance Across Various Browsers

I have found that the CSS property command for multiple columns functions properly in Opera and IE, but unfortunately does not work in Firefox, Chrome, or Safari

HTML form submitting with a symbol illustration