Use a CSS rule only if the element is not nested by using the :not selector

Question

Use a CSS rule only if the element is not nested by using the :not selector

Could use some assistance with this coding issue:

.element {
   border: 1px solid red;
   display: block;
}

I want to exclude this rule when .element is a descendant of .no-border using the :not pseudo-selector. For example:

<div class="element">I have a border</div>

<div class="no-border">
   <div class="element">I don't have a border</div>
</div>

This is what I have tried:

:not(.no-border) .element {
   border: 1px solid red;
   display: block;
}

However, the border still shows on .element when it is within .no-border.

https://jsfiddle.net/7Lox10pL/1/

Any suggestions or solutions would be greatly appreciated!

html css

Answer 1

Answer №1

It is recommended to utilize the direct child selector >:

:not(.no-border)>.item

JSFiddle Link

Answer 2

It is recommended to utilize the direct child selector >:

:not(.no-border)>.item

JSFiddle Link

Answer 3

Answer №2

If you need to apply different styles to a child element of the class .no-border, you can create a separate selector and override the styles using initial. Here's an example:

.no-border .element {
   border: initial;
   display: initial;
}

Check out the demonstration on JSFiddle.

Answer 4

If you need to apply different styles to a child element of the class .no-border, you can create a separate selector and override the styles using initial. Here's an example:

.no-border .element {
   border: initial;
   display: initial;
}

Check out the demonstration on JSFiddle.

Answer 5

Answer №3

Here is a potential solution for you:

.mainClass {
        h3 {
            color: blue;
        }
        :not(.nested) (div > div) {
            color: green;
        }
}

Answer 6

Here is a potential solution for you:

.mainClass {
        h3 {
            color: blue;
        }
        :not(.nested) (div > div) {
            color: green;
        }
}

Use a CSS rule only if the element is not nested by using the :not selector

Answer №1

Answer №2

Answer №3

Similar questions

Divide the <ul> element into two columns with CSS only if the number of <li> items is more than 5

The fixed-top navbar in Bootstrap 5 is not displaying the toggle button

Tips for implementing bslib package pop up window within a table displayed using rhandsontable in R Shiny

SCRIPT5007: The property 'href' cannot be assigned a value as the object is either null or undefined

contrasting ionic and android software development kits

Choose a sibling element using CSS styling

Scrolling through four limited list items automatically

Immersive video platform combining HTML5 and Flash technologies

Utilizing an offline HTML file instead of a URL within Objective-C programming

Need assistance with PHP syntax?

Find all elements with the same class and identify the first element among them using jQuery

Video tag with centered image

Dropping challenging shapes in a block-matching game similar to Tetris

Can you explain the purpose of the #shadow-root found within elements?

Each time I load the page, it displays differently depending on the browser. I'm struggling to understand the reason

Styling Material UI components with CSS is a great way to

Navigate directly to the section on the page that discusses the hashtag

"Can the form and action occur on the same page, or should they be

Code Wizard

Adjusting the quantity of buttons in real-time following an ajax request