Utilizing the :not selector in combination with adjacent elements

Question

Utilizing the :not selector in combination with adjacent elements

Here's my HTML:

<div class="parent">
    <div class="thumb">...</div>
    <div class="text">...</div>
</div>

I need the "text" div background to be white, but only if there is no preceding "thumb" div.

I could use this CSS:

.parent .text {background-color: #fff;}
.parent .thumb + .text {background-color: transparent;}

This sets all text backgrounds to white and then changes those with a thumb div before it. But I'm wondering if I can simplify it like this:

.parent :not(.thumb +) .text {background-color: white;}

This way, the style only applies to the "text" div when there is no preceding "thumb" div. Any thoughts?

html css css-selectors

Answer 1

Answer №1

To implement conditional statements (if/else) in CSS, you can leverage SASS:

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

For more information, refer to the official documentation.

Alternatively, JavaScript/jQuery can be utilized to dynamically add or remove classes based on specific conditions.

Keep in mind that traditional CSS does not support native if/else functionality.

Answer 2

To implement conditional statements (if/else) in CSS, you can leverage SASS:

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

For more information, refer to the official documentation.

Alternatively, JavaScript/jQuery can be utilized to dynamically add or remove classes based on specific conditions.

Keep in mind that traditional CSS does not support native if/else functionality.

Answer 3

Answer №2

To effectively target an element using CSS, you can use the .thumb + .text {} selector but keep in mind that this style will only be applied when there is a .thumb element right before the .text element:

.parent {
    background: grey;
    border: 1px solid red;
    margin-bottom: 30px;
}

.text {
    background: purple;
}

.thumb + .text {
    background: white;
}

<div class="parent">
    <div class="thumb">...</div>
    <div class="text">White bg</div>
</div>

<div class="parent">
    <div class="text">White bg</div>
</div>

Answer 4

To effectively target an element using CSS, you can use the .thumb + .text {} selector but keep in mind that this style will only be applied when there is a .thumb element right before the .text element:

.parent {
    background: grey;
    border: 1px solid red;
    margin-bottom: 30px;
}

.text {
    background: purple;
}

.thumb + .text {
    background: white;
}

<div class="parent">
    <div class="thumb">...</div>
    <div class="text">White bg</div>
</div>

<div class="parent">
    <div class="text">White bg</div>
</div>

Utilizing the :not selector in combination with adjacent elements

Answer №1

Answer №2

Similar questions

Tips to stop excessively long text from overflowing its containing div

How can I use jQuery to reposition an inner element to the front?

Is there a way to change tailwincss into regular CSS?

Delay in dropping while using React Beautiful DnD

When using CSS float:left and overflow:visible, the text may get cropped-off at

Python: Leveraging lxml to find content not within a span tag

Footer content encroaching on main body text

Select an image from the browser using JavaScript, adjust its size, and then transmit it to the server. Finally, utilize PHP to properly save the image

Creating a scrollable div in Electron

Hide the button with jQuery Ajax if the variable is deemed acceptable upon submission

Is the Addthis widget displaying incorrectly in a fixed element?

The button in Bootstrap 4 that triggers the modal stays in a highlighted or clicked state even after the modal has been

The modal is functioning perfectly with the initial row in the table

Assertion error: 1 does not match the expected value of 6

Animating an upward movement of a div nested inside another div

The text on the asp:Button displays incorrectly in IE8+

displaying outcomes as 'Indefinite' rather than the anticipated result in the input field

activating the submit button depending on the user input

Chrome's CSS columns cannot contain iframes without causing them to escape their

The data-toggle function is not functioning properly with the code provided