Hierarchy segment for CSS selection

Question

Hierarchy segment for CSS selection

I have a rather unique query. How can I create a selector that targets a specific part of the hierarchy based on classes? For instance, I'd like to select something like:

<node class="start-selection">
        <node>
            <node>content affected</node>
        </node>

        <node>
            <node>content affected</node>
        </node>

        <node class="end-selection">
            <node>
                <node>content not affected</node>
            </node>
        </node>

        <node>
            <node>content affected</node>
        </node>
    </node>

I'm considering something like this:

.start-selection, .start-selection *:not(.end-selection, .end-selection *){
        /*styling...*/
    }

However, it seems that this approach doesn't work because compound selectors cannot be used in the :not() pseudo class. Do I have to resort to using JavaScript to achieve this? Thanks.

css

Answer 1

Answer №1

Incorporating a little script can achieve what pure CSS alone cannot accomplish.

var elements = document.querySelectorAll(".end-selection *");
for (i = 0; i < elements.length; i++){
  elements[i].className += " end-selection-child";
}

Here is the corresponding CSS:

.start-selection *:not(.end-selection):not(.end-selection-child){
   background:blue;
}

You can see a demonstration here.

Answer 2

Incorporating a little script can achieve what pure CSS alone cannot accomplish.

var elements = document.querySelectorAll(".end-selection *");
for (i = 0; i < elements.length; i++){
  elements[i].className += " end-selection-child";
}

Here is the corresponding CSS:

.start-selection *:not(.end-selection):not(.end-selection-child){
   background:blue;
}

You can see a demonstration here.

Answer 3

Answer №2

Using CSS alone, accomplishing this task is truly unattainable. Absolutely.

Answer 4

Using CSS alone, accomplishing this task is truly unattainable. Absolutely.

Hierarchy segment for CSS selection

Answer №1

Answer №2

Similar questions

What are the steps to recreate the layout of my image using HTML?

Content overlapped by Bootstrap footer

Is there a way to arrange the cards in a row so they fill up the grid before moving on to the next row?

Leverage the power of HTML, CSS, and Bootstrap within Visual Studio 2022 when developing with

"Enhancing Website Styling with Twitter Bootstrap's Border

Deleting images based on their class through a loop

Why does this CSS ticker only display the first four posts?

Incorporating a CSS stylesheet into the theme settings of the Stratus 2 Beta platform

Avoid sudden page movements when validating user input

Issue with child div exceeding 100% height within CSS Flexbox causing inconsistency in Firefox and Chrome browsers

Instantly appearing and disappearing Bootstrap modal popup catches users off guard

Is there a way to obtain metadata for a specific link?

Discrepant alignment of form group among the other elements in Bootstrap CSS

Using CSS to style PHP function results

Turn off the perpetual active mode

What steps should be taken to correct the misalignment of the closing x symbol in the alert box?

What is the best way to incorporate a button for toggling CSS animations?

What's the best way to align three images in a row?

Achieve full width with flexbox column wrap while minimizing the height

Issue with JavaScript HTML Section Changer not functioning properly