Attempting to select the :nth-child element following a specific class using the tilde (~) operator

Using the ~ selector to target list items after the class .is-middle is found, but struggling to select each subsequent list item with nth-child(1), nth-child(2).... Any insights on what might be causing this issue?

SCSS

.ctn {
    li {
        width: 100%;
        height: 50px;
        background: lightgrey;
        border-bottom: 1px solid #eee;

        &.is-middle ~ li {

            &:nth-child(1) {
                background: purple;
            }

            &:nth-child(2) {
                background: green;
            }

            &:nth-child(3) {
                background: yellow;
            }
        }
    }
}

PEN: http://codepen.io/styler/pen/mgfxJ

htmlcsssasscss-selectors

Answer №1

Reasons why the usage of nth-child is problematic:

The selector operates based on the element's position within its parent, so selecting li.is-middle ~ li:nth-child(1) essentially targets the first li following .is-middle, which does not exist.

Alternative Solution 1:

If you are comfortable with the first color changing relative to the position of .is-middle, you can utilize :nth-child as shown below to style subsequent siblings:

li.is-middle ~ li:nth-child(3n) {
    background: purple;
}
li.is-middle ~ li:nth-child(3n+1) {
    background: green;
}
li.is-middle ~ li:nth-child(3n+2) {
    background: yellow;
}

VIEW DEMO

Alternative Solution 2:

To exclusively target the three consecutive siblings following .is-middle, you can employ the + selector in this manner:

li.is-middle + li {
    background: purple;
}
.ctn li.is-middle + li + li {
    background: green;
}
.ctn li.is-middle + li + li + li {
    background: yellow;
}

VIEW DEMO

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

Is the image flickering non-stop when the button is pressed?

Every time I push the button, the image on the HTML 5 canvas flickers. After investigating, it seems like the issue might be related to the ctx.clearRect(0,0,100,500) function. Any suggestions on how to fix this problem? I'm currently working on anim ...

javascripthtmlhtml5-canvashtml5-animation

Experiencing varying top offsets on initial click followed by consistent offsets on subsequent clicks

The first image shows jquery(document).height() and the second image shows offset().top. I am attempting to scroll to an element with a fixed header, but on the first click I get a different value for offset().top than on the second click. It seems that th ...

htmljquerywebheightoffset

Using jQuery, add an h1 tag to the body element with the ID "home", and an h4 tag for every other body

Hello everyone, I've been utilizing a PHP include to add my header section and I'd like to have my logo enclosed in an h1 for the homepage, and an h4 for the other pages. The homepage is identified by a body ID of "home" while each remaining page ...

jqueryhtml

Using the "position: absolute" property will not contribute to the

I am facing an issue with aligning two div elements inside a parent div. Currently, they are rendering side by side: <image><info> However, on smaller screens, I want them to render one under the other and swap positions, like this: <inf ...

cssresponsive-designcss-floatcss-position

Uneditable border in Bootstrap table

I am currently utilizing Bootstrap table to showcase some basic information, however, I am facing a peculiar problem. Upon using the bootstrap-table stylesheet, the table displays as desired without an outer border. However, upon initializing the styleshe ...

htmlcsstwitter-bootstraphtml-tablebootstrap-4

Guide on displaying search results in separate boxes using HTML

I am struggling with organizing my search engine results in separate boxes on my website. Being new to HTML, I am unsure of how to achieve this layout. Currently, all the results are overlapping each other, and it's creating a messy display. Can anyon ...

pythonhtmlcssdjango

Interactive HTML5 Web Application File Selector

After conducting thorough research, it is important to note that I am well-versed in the security implications of this client-side application which utilizes JavaScript, Vue, and pure HTML5. To initiate the file dialog, I employ a hidden input type file. ...

javascripthtmlfile-uploadvue.jsclient-side

What is the best way to delete a container when its child element includes a specific string?

I run a website that compiles video clips from various sources, including YouTube. Occasionally, some clips appear as private videos. I am looking to use jQuery to apply the display:none; property to the entire div when the class a.colorbox.cboxElement con ...

javascriptjqueryhtmlcss

Using a Jinja 'for' loop to create nested 'If' statements

I'm attempting to include an if statement within a loop for a jinja template: </table> <class="container"> <table border ="1"> <caption> BBOXX <caption> <thead class="thead-inverse"> <tr> <th& ...

pythonhtmlfor-loopif-statementjinja2

Issues with implementing @font-face on a singular font

I've encountered an issue while setting up a website for a client concerning the fonts. Most fonts are displaying correctly, but there is one font, "chunkfive", that is not working as expected. The problem becomes more severe in Internet Explorer wher ...

htmlcssfontscross-browserfont-face

Is there a framework available to animate Pseudo CSS elements?

Recently, I was working on developing a bar chart that utilized pseudo CSS elements (::before, ::after). While I successfully created bars that look visually appealing, I encountered a challenge when attempting to animate the height changes. Whenever I us ...

javascriptcssjquery-animate

The jQuery dropdown menu smoothly expands to reveal all hidden submenu options

I'm currently encountering an issue with jQuery. I am trying to create a responsive drop-down menu with sub-menus. The behavior I want is that if the window width is less than 700px, the submenus will trigger onClick. And if the window is wider than 7 ...

javascriptjqueryhtmlcssmenu

Designing Your WordPress Website's Header Structure

When working on my non-WP sites, I usually handle columns using Bootstrap. However, this is my first time delving into CSS positioning without it. I am trying to align my site header elements similar to the image shown, where the text elements are flush ri ...

htmlcsswordpressresponsive-design

JavaScript and modifying color using hexadecimal color codes

Being a novice in front-end development, I embarked on a project using JavaScript that would alter the color of a div based on environmental parameters such as temperature and pressure. My initial idea involved creating buttons to adjust the temperature - ...

javascripthtmlcss

Arrangement of images in an array

Here's the scenario I'm facing. https://i.stack.imgur.com/FbAfw.jpg So, I have an array of images that I want to use to create a gallery with a specific layout. I've tried using grid and playing around with :nth-child(even) and :nth-child( ...

javascriptphpcssarraysforeach

Are there any easier methods for locating the coordinates of a state?

I am currently working on my first JS project, which involves creating an interactive map with markers for each state in the US. Using Leaflet.js, I have manually inputted the name and coordinates of every state in alphabetical order. Below is a snippet o ...

javascripthtmlleaflet

Overriding table styling with Bootstrap in a custom stylesheet

Recently, I made the switch from bootstrap v4 to v5 and I am in the process of identifying and fixing any issues that may have arisen. One particular issue that I am stuck on is the <th> tag not displaying correctly in the table. It seems like my tab ...

htmlcsstwitter-bootstrapbootstrap-5

Tips for effectively utilizing the display:none property to conceal elements and permanently eliminate them from the DOM

While working on my website, I utilized CSS media queries to hide certain elements by using display: none. Even though this effectively hides the element from view, it still lingers in the DOM. Is there a way to completely eliminate the element from the ...

javascriptjquerycss

How to eliminate the arrow symbols in a scrollbar using CSS

Typically, a vertical scroll bar will display up and down arrows at both ends. However, is there a way to customize the appearance so that only the scroll bar itself is visible without the arrows? Below is the CSS code I am using: .scrollbar-vertical { ...

htmlcss

Using a custom function, automatically initiate audio playback when an Android WebView JS loads

I have a unique JS function specifically designed for the audio tag, which also controls the progress bar. It works perfectly when I click on the associated tag <a onclick="playSound(1)">. However, if I try to initiate it on page load, the function s ...

javascripthtmlaudio