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?

htmlcsssass

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

Solved it using the following method:

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

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When I try to open my modal in Electron by clicking on the button, it doesn't work

I was expecting the modal to open by clicking on the Edit button within #app, but it doesn't open at all! I am unsure if there is an issue with my JavaScript logic or my HTML code! When attempting to use a function for the Modal, it still does not wo ...

htmlvue.jselectron

What is the methodology behind stackoverflow's implementation of comments functionality?

I am looking to implement a feature comparable to the comment system on Stack Overflow for this website. The idea is to enable users to type in a text, click submit, and instantly see it displayed on the page without having to navigate away. It has to be ...

htmlajax

Navigate to the middle of a DIV container in Angular 7

Is there a way to programmatically scroll to the center of my element on both the Y and X axes when a specific function is executed? My HTML structure includes the following (I am aiming to scroll to the middle of #viewport): </div> <div # ...

javascripthtmlcssangular

When a user clicks on an anchor tag, the corresponding value of the checked item is then returned

I have 3 sets of radio buttons. When a specific anchor with the "round" class is clicked, two actions should occur: The associated set of radio buttons needs to become visible The value of the checked input for that element should be returned. I am ...

javascripthtmlinputradio-button

What is causing the "draggable='true'" attribute to fail on a React-rendered component?

This situation is really frustrating me, and I am hoping that someone can offer some assistance. I'm working with a React.Component that looks like this: var Vehicle = React.createClass({ ondragend: function(e) { e.preventDefault(); ...

htmlreactjsdraggable

Challenging design with CSS shapes

Can this specific shape be created using just one HTML element? I am looking to use it for image cropping purposes, so having only one element would make the process easier ...

htmlcsstransformcss-shapes

Is it better to dynamically generate HTML elements or to just directly paste complete fragments in the code?

After manipulating the DOM and injecting AJAX content, I often find myself filling in the new content into a copied HTML fragment, then populating it with the updated information before using $().html() to insert the modified code back into the DOM. The ex ...

javascripthtmlajaxdom

What is the process for aligning Item1 to the left and Item2 & Item3 to the right using MUI React?

I'm working on a component that contains three different Typography components. I need to align "summary" to the left, while 'miles' and 'duration' should be aligned to the right. https://i.stack.imgur.com/7e9sY.png Here's t ...

javascriptcssreactjsmaterial-ui

Leveraging the power of Angular to send the contents of a div via email

I have a div element with a specific class name and I am currently exploring ways to extract the rendered components of that div as text in order to include it in the body of an email. I have tried various methods such as using classes and ng-model, but so ...

javascripthtmlangularjsemail

Modify the hover color of heading 1 only for hyperlink texts

I am attempting to adjust the hover color specifically for text that contains a link. Below is the CSS code I have tried, but it changes the color regardless of whether there are links present or not. h1, h2, h3, h4 { color:#3F3F3F; } h1:hover, h2:hove ...

csshyperlinkcolorshover

Is it possible to optimize the performance of my React and TypeScript project with the help of webpack?

I am working on a massive project that takes 6 to 8 minutes to load when I run npm start. Is there a way to speed up the loading process by first displaying the sign-in page and then loading everything else? ...

javascripthtmlreactjstypescriptwebpack

Why is my React build's index.html coming up empty?

I've been working on a React app using Snowpack, and everything seems to be in order. The build process completes successfully, but when I try to open the index.html file from the build folder, the page appears blank. To temporarily resolve this issu ...

javascripthtmlreactjssnowpack

MS Edge modifies the attribute's empty value to 1

I have written a JavaScript code to extract values from a list, but in the Windows Edge browser, it returns a value of 1 even when the actual value of the <li> tag is blank. For example: HTML Code <ul> <li value="">Test 1</li&g ...

javascriptjqueryhtmlmicrosoft-edge

Obtain the text content of a div using JavaScript

Hello, I am new to Javascript! I have a table structure that looks like this: <table id='master_tbl'> <tbody> <tr id="master_hr'> <td class="myclass"> <table> <tbody ...

javascripthtml

Hiding the overflow conceals the entire image in one direction, while leaving the other exposed

Here is the code I have written for my project (view fiddle here): img { width: 200px; height: 200px; } .image-container { width: 600px; height: 200px; overflow: hidden; } I am working with multiple images, all sized at 200px by 200p ...

htmlcss

Incorporating jQuery to Load Content into a DIV while preserving the original JavaScript

I am attempting to implement the following <script> $(document).ready( function() { var data = 'testing' $("#about").on("click", function() { $("#main-content").load("/about.html"); ...

javascripthtmljquery

Incorporate a smooth infinite scroll feature in a CSS carousel that seamlessly loops without

Looking for a solution to the carousel jerk issue when it reaches the end of the loop? Is there a way to seamlessly loop start without any noticeable interruptions? Here is the code in question. Avoiding the use of JavaScript, is there a method to achieve ...

htmlcsscss-transitions

Positioning a sticky footer in a dual-column design

This updated post is a revised version of the one found at this link. I aim to provide a clearer explanation of my issue compared to the previous post. The problem revolves around the placement of the footer in two different scenarios. Scenario 1: The fi ...

htmlcss

Changing Background Colors of Grid Items in React.js Grid Layout

I'm currently learning React and have created a basic app that shows data from a database in a grid format. I'm looking to customize the background colors of each grid item based on its priority level, which is pulled from the database. The prior ...

cssreactjsgridview

Samsung devices exclusively showcase background in responsive design

I am encountering a major problem with my website design, specifically with its compatibility on mobile devices. To ensure its responsiveness, I have tested the design on my iPhone, iPad, and Windows Phone. Unfortunately, since I lack an Android device, I ...

androidhtmlcssbrowser