How can I target all ul elements except those contained within a div with a specific class using CSS?

Question

How can I target all ul elements except those contained within a div with a specific class using CSS?

In my global.scss file, I have defined global styles for ul elements as shown below:

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

However, I am trying to find a way to style all ul elements except those within a specific jodit-wrapper class. Despite attempting the following code snippet, it does not yield the desired result:

ul:not(.jodit-wrapper) {
    list-style: none;
    margin: 0;
    padding: 0;
}

Could you please advise on the correct approach to achieve this?

html css sass

Answer 1

Answer №1

The jodit-wrapper class is specifically designed for the parent div of the ul. If this is the case, your code should look something like the following:

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.jodit-wrapper ul {
  list-style: inside;
  margin: 10px;
  padding: 10px;
}

<div class="jodit-wrapper"> 
  <ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ul> 
</div>
<div>
   <ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ul>
</div>

If the jodit-wrapper class is indeed meant for the styling of the ul, then your current code implementation should suffice.

Answer 2

The jodit-wrapper class is specifically designed for the parent div of the ul. If this is the case, your code should look something like the following:

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.jodit-wrapper ul {
  list-style: inside;
  margin: 10px;
  padding: 10px;
}

<div class="jodit-wrapper"> 
  <ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ul> 
</div>
<div>
   <ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ul>
</div>

If the jodit-wrapper class is indeed meant for the styling of the ul, then your current code implementation should suffice.

Answer 3

Answer №2

Solved it using the following method:

ul:not(.jodit-wrapper ul) {
    list-style: none;
    margin: 0;
    padding: 0;
}

Answer 4

Solved it using the following method:

ul:not(.jodit-wrapper ul) {
    list-style: none;
    margin: 0;
    padding: 0;
}

Answer 5

Answer №3

Avoid selecting the div with the jodit-wrapper class.

/* exclude uls in any div that has the jodit-wrapper class */

div:not(.jodit-wrapper) ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

<div class="jodit-wrapper">
  <ul>
    <li>I should have default list style</li>
    <ul>
</div>
<div>
  <ul>
    <li>I should not have a list style</li>
  </ul>
</div>

Answer 6

Avoid selecting the div with the jodit-wrapper class.

/* exclude uls in any div that has the jodit-wrapper class */

div:not(.jodit-wrapper) ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

<div class="jodit-wrapper">
  <ul>
    <li>I should have default list style</li>
    <ul>
</div>
<div>
  <ul>
    <li>I should not have a list style</li>
  </ul>
</div>

How can I target all ul elements except those contained within a div with a specific class using CSS?

Answer №1

Answer №2

Answer №3

Similar questions

Enhancing the appearance of the active menu item with HTML/CSS/JS/PHP

When the input field is not selected, switch it to display as plain text

Utilizing AngularJS directives with the power of string formatting

Utilize Angular Material to assign the value of a mat-select component based on the FormControlName property

Creating a new row with a dropdown list upon clicking a button

Interactive element for initiating a HTTP request to NodeJS/Express server to trigger a specific function

Fixing Half Screen Sidebars

When hovering over the menu list, the background-color of the text area remains the same

What types of events can be used to trigger the start of HTML5 audio playback in mobile Chrome?

Using jQuery and HTML to create numerous links that direct to a solitary iframe

Steps for showcasing a automated slideshow

Is there a way to modify the location of the datepicker/calendar icon within my bootstrap form?

What could be preventing the application of my skew via -ms-filter matrix in Internet Explorer?

New feature in Bootstrap 4 beta allows carousel arrows to be positioned outside of the

Tips for avoiding flickering in a background image when it is being changed

Arrange elements in a vertical flow based on the height of the container

Preserve line breaks within HTML text

Bringing in SCSS using Typescript, React, and Webpack

Creating a component that surpasses all others

A step-by-step guide on uploading a CSV file in Angular 13 and troubleshooting the error with the application name "my