Selecting sibling elements based on their position in the hierarchy can be achieved using a CSS selector that targets

Question

Selecting sibling elements based on their position in the hierarchy can be achieved using a CSS selector that targets

In the scenario where there is an HTML element with multiple siblings:

    <div id=parent>
        <div></div>
        <div></div>
        <div></div>
        ...
        <div id=fourthToLast></div>
        <div></div>
        <div id=penultimate></div>
        <div></div>
    </div>

The penulimate and the fourthToLast siblings have unique requirements: One of them - never both - should be displayed at different widths based on media breakpoints and total number of siblings.

I've attempted to use pseudo-selectors in my CSS code:

silibingNrOf(#penultimate) mod x = y

For instance, if there are a total of 15 siblings inside the parent element, then silibingNrOf(#penultimate) will be 14.
silibingNrOf(#penultimate) mod 3 would return 2.

I am struggling to find the correct CSS selector syntax for this situation:

    #fourthToLast, #penultimate { display: none; }

    @media screen and (min-width: 400px) {
        
        if silibingNrOf(#penultimate) mod 2 = 0 {
            #penultimate { width: 25%; display: block; }
        }
        
        @media screen and (min-width: 800px) {
        
            #penultimate { display: none; }
        
            if silibingNrOf(#penultimate) mod 3 = 2 {
                #penultimate { width: 33%; display: block; }
            }

            if silibingNrOf(#penultimate) mod 3 = 0 {
                #fourthToLast { width: 16.666%; display: block; }
            }   
        
       }
    }

css sass

Answer 1

Answer №1

Update: An alternative approach would be to employ :nth-of-type(3n) for elements where

silibingNrOf(#penultimate) mod 3 = 0

, and utilize :nth-of-type(3n+2) for cases where

silibingNrOf(#penultimate) mod 3 = 2

. Additionally, you can use :nth-of-type(even) or :nth-of-type(2n) for scenarios where

silibingNrOf(#penultimate) mod 2 = 0

, as previously mentioned. Instead of solely relying on Javascript like my initial response suggested, the same results could have been achieved using :nth-child() with identical parameters. This realization only surfaced after your feedback.

Prior solution: One feasible method in JavaScript is depicted below:

const parent = document.getElementById("parent");
const parentChildrenCount = parent.childElementCount; 
if(parentChildrenCount % 2 === 1){
    parent.addClass("even"); // silibingNrOf(#penultimate) mod 2 = 0
}
if(parentChildrenCount % 3 === 1){
    parent.addClass("triple"); // silibingNrOf(#penultimate) mod 3 = 0
}
else if(parentChildrenCount % 3 === 0){
    parent.addClass("almost-triple"); // silibingNrOf(#penultimate) mod 3 = 2
}

Subsequently, these specified classes can be employed in your Sass code to target the respective elements. Furthermore, selectors such as penultimate and fourthToLast may be designated using the :nth-last-child pseudoselector.

Answer 2

Update: An alternative approach would be to employ :nth-of-type(3n) for elements where

silibingNrOf(#penultimate) mod 3 = 0

, and utilize :nth-of-type(3n+2) for cases where

silibingNrOf(#penultimate) mod 3 = 2

. Additionally, you can use :nth-of-type(even) or :nth-of-type(2n) for scenarios where

silibingNrOf(#penultimate) mod 2 = 0

, as previously mentioned. Instead of solely relying on Javascript like my initial response suggested, the same results could have been achieved using :nth-child() with identical parameters. This realization only surfaced after your feedback.

Prior solution: One feasible method in JavaScript is depicted below:

const parent = document.getElementById("parent");
const parentChildrenCount = parent.childElementCount; 
if(parentChildrenCount % 2 === 1){
    parent.addClass("even"); // silibingNrOf(#penultimate) mod 2 = 0
}
if(parentChildrenCount % 3 === 1){
    parent.addClass("triple"); // silibingNrOf(#penultimate) mod 3 = 0
}
else if(parentChildrenCount % 3 === 0){
    parent.addClass("almost-triple"); // silibingNrOf(#penultimate) mod 3 = 2
}

Subsequently, these specified classes can be employed in your Sass code to target the respective elements. Furthermore, selectors such as penultimate and fourthToLast may be designated using the :nth-last-child pseudoselector.

Answer 3

Answer №2

Considering the setup outlined in the query along with all its possibilities, ranging from 1 to 7 components (including 'penultimate' and 'fourthToLast'). The vacant elements previously known as 'penultimate' and 'fourthToLast' do not necessitate an ID for this purpose.


    <div id=parent1>
        <div></div>
        <div>Content 1</div>
    </div>
    
    <div id=parent2>
        <div></div> 
        <div>Content 1</div>
        <div></div> 
        <div>Content 2</div>
    </div>
    
    <div id=parent3>
        <div>Content 1</div>
        <div></div>
        <div>Content 2</div>
        <div></div>
        <div>Content 3</div>
    </div>
    
    <div id=parent4>
        <div>Content 1</div>
        <div>Content 2</div>
        <div></div>
        <div>Content 3</div>
        <div></div>
        <div>Content 4</div>
    </div>
    
    <div id=parent5>
        <div>Content 1</div>
        <div>Content 2</div>
        <div>Content 3</div>
        <div></div>
        <div>Content 4</div>
        <div></div>
        <div>Content 5</div>
    </div>
    
    <div id=parent6>
        <div>Content 1</div>
        <div>Content 2</div>
        <div>Content 3</div>
        <div>Content 4</div>
        <div></div>
        <div>Content 5</div>
        <div></div>
        <div>Content 6</div>
    </div>
    
    <div id=parent7>
        <div>Content 1</div>
        <div>Content 2</div>
        <div>Content 3</div>
        <div>Content 4</div>
        <div>Content 5</div>
        <div></div>
        <div>Content 6</div>
        <div></div>
        <div>Content 7</div>
    </div>

The objective is

Initially hide the two (non-core) additional child elements,
which will consistently be the penultimate and fourth-to-last child.

if screen width is 400px ≤ x < 800px
    if count of core children is odd
        show the penultimate child at a 25% width

if screen width ≥ 800px
    if count of core children mod 3 equals 2
        present the penultimate child with a width of 16.66%

    if count of core children mod 3 equals 1
        showcase the fourth-to-last child with a width of 33.33%

To tackle this challenge without javascript and excluding functions that are not universally supported by all browsers (:has() / Firefox).

Solution:

:is(#parent1, #parent2, #parent3, #parent4, #parent5, #parent6, #parent7) {

    div:nth-last-child(2) {
        display: none;

        @media screen and (min-width: 400px) {
            &:is(:first-child, :nth-of-type(even)) {
                width: 25%;
                display: block;
            }
            @media screen and (min-width: 800px) {          
                &:nth-of-type(even) {
                    display: none;
                }
                &:is(:first-child, :nth-of-type(3n + 2)) {
                    width: 33.33%;
                    display: block;
                }
            }
        }
    }

    div:nth-last-child(4) {
        display: none;

        @media screen and (min-width: 800px) {
            &:nth-child(3n + 1) {
                width: 16.66%;
                display: block;
            }
        }
    }
}

Credits to David Thomas for his highly informative jsfiddle that guided me in the right direction.

Answer 4

Considering the setup outlined in the query along with all its possibilities, ranging from 1 to 7 components (including 'penultimate' and 'fourthToLast'). The vacant elements previously known as 'penultimate' and 'fourthToLast' do not necessitate an ID for this purpose.


    <div id=parent1>
        <div></div>
        <div>Content 1</div>
    </div>
    
    <div id=parent2>
        <div></div> 
        <div>Content 1</div>
        <div></div> 
        <div>Content 2</div>
    </div>
    
    <div id=parent3>
        <div>Content 1</div>
        <div></div>
        <div>Content 2</div>
        <div></div>
        <div>Content 3</div>
    </div>
    
    <div id=parent4>
        <div>Content 1</div>
        <div>Content 2</div>
        <div></div>
        <div>Content 3</div>
        <div></div>
        <div>Content 4</div>
    </div>
    
    <div id=parent5>
        <div>Content 1</div>
        <div>Content 2</div>
        <div>Content 3</div>
        <div></div>
        <div>Content 4</div>
        <div></div>
        <div>Content 5</div>
    </div>
    
    <div id=parent6>
        <div>Content 1</div>
        <div>Content 2</div>
        <div>Content 3</div>
        <div>Content 4</div>
        <div></div>
        <div>Content 5</div>
        <div></div>
        <div>Content 6</div>
    </div>
    
    <div id=parent7>
        <div>Content 1</div>
        <div>Content 2</div>
        <div>Content 3</div>
        <div>Content 4</div>
        <div>Content 5</div>
        <div></div>
        <div>Content 6</div>
        <div></div>
        <div>Content 7</div>
    </div>

The objective is

Initially hide the two (non-core) additional child elements,
which will consistently be the penultimate and fourth-to-last child.

if screen width is 400px ≤ x < 800px
    if count of core children is odd
        show the penultimate child at a 25% width

if screen width ≥ 800px
    if count of core children mod 3 equals 2
        present the penultimate child with a width of 16.66%

    if count of core children mod 3 equals 1
        showcase the fourth-to-last child with a width of 33.33%

To tackle this challenge without javascript and excluding functions that are not universally supported by all browsers (:has() / Firefox).

Solution:

:is(#parent1, #parent2, #parent3, #parent4, #parent5, #parent6, #parent7) {

    div:nth-last-child(2) {
        display: none;

        @media screen and (min-width: 400px) {
            &:is(:first-child, :nth-of-type(even)) {
                width: 25%;
                display: block;
            }
            @media screen and (min-width: 800px) {          
                &:nth-of-type(even) {
                    display: none;
                }
                &:is(:first-child, :nth-of-type(3n + 2)) {
                    width: 33.33%;
                    display: block;
                }
            }
        }
    }

    div:nth-last-child(4) {
        display: none;

        @media screen and (min-width: 800px) {
            &:nth-child(3n + 1) {
                width: 16.66%;
                display: block;
            }
        }
    }
}

Credits to David Thomas for his highly informative jsfiddle that guided me in the right direction.

Selecting sibling elements based on their position in the hierarchy can be achieved using a CSS selector that targets

Answer №1

Answer №2

Similar questions

The issue with the smooth scrolling feature in next/link has not been resolved

Loading CSS resources in advance can still cause rendering delays

How to make an HTML element draggable without the need for an ID

Is it possible to make an HTML page permanent and uneditable?

When I attempt to incorporate multiple sliders on a single page, I encounter difficulties in determining the accurate stopping position if the number of slides varies

Tips for designing a webpage where a div element adjusts to fit the screen, regardless of the width of the content inside

When I try to expand the width of a div, the display property set to inline

Tips for saving the circular slider value to a variable and showcasing it in the console

Expanding on the specific properties of a parent component to its child, using SASS's extend feature

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

aligning elements on various screens

Using the "margin: auto" property to center the text box

What steps can be taken to ensure an animation does not continually reset to its original state when run infinitely?

Two divisions placed side by side

Implementing jQuery code to increase the height of a Text Area dynamically

Toggle the current list item in Jquery to expand to 100% width, while simultaneously shifting any adjacent items on the left and right downwards if present

Enhance user experience with dynamic color changes in JavaScript

Nginx and Django encountering issues with loading css files on a production server

Which shortcuts or techniques in jQuery/JavaScript can I implement to simplify this code further?

How to style CSS to ensure printed table content fits perfectly within the page