Choose all elements following the first child element

My goal is to create a LESS rule that targets every element following the current element, excluding the first child.

I've tried using this syntax:

(& ~ *):not(:first-child) {
  margin-left: 5px;
}

and also this one:

& ~ *:not(:first-child) {
  margin-left: 5px;
}

Unfortunately, neither of these approaches seem to be effective in achieving the desired outcome.

Answer №1

The :first-child pseudo-class always refers to the initial child within its parent element. However, it is unable to exclude the first sibling that comes after the reference element.

If your intention is to target all elements excluding the immediate sibling following the reference element, you should use the following syntax:

.reference + * ~ *{
  color: red;
}

In this context, the .reference symbolizes the reference element, the + * points to the first sibling of the reference element irrespective of its type, and the ~ * signifies all subsequent siblings which can be of any type.

For those utilizing Less, the selector could either remain as shown above or alternatively, it can be structured like so:

.reference {
  & + * ~ * {
    color: red;
    /* additional styling rules here */
  }
}

The example below illustrates the functionality in action

.reference + * ~ *{
  color: red;
}
<div class='reference'>Reference Element</div>
<p>Some other element which is the first one after reference element</p>
<div>The elements to be selected</div>
<p>The element to be selected</p>

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 "sticky footer" in CSS causing issues with the percentage height of nested divs?

My "main-section" div is designed to inherit its height from the parent div, known as the "wrapper." The wrapper div, in turn, takes its height from the body of the document. Both the HTML and body tags are set with a height of 100%. To implement the ...

Creating a drop-down menu that aligns perfectly under the bar in Material-UI: What you need to know

While working with Material-UI, I encountered a problem with my drop-down menu. Every time I click on it, it covers the bar instead of appearing below it (see image links below). https://i.stack.imgur.com/1Y8CL.jpg https://i.stack.imgur.com/emf87.jpg Is ...

The issue with the placement of the Bootstrap navbar-brand

My regular bootstrap navbar is presenting a problem where the item "navbar-brand" appears higher than the other items in the navbar, which seems illogical. This issue does not occur on the official bootstrap page and persists even when tested on jsfiddle. ...

Creating a soft focus effect in a specific region (behind the text)

While working on my homepage created with HTML/CSS/Javascript, I have text positioned at the top left corner of the screen. The challenge arises from the fact that I am using different backgrounds sourced from Reddit, and a script randomly selects one duri ...

Layering numerous backgrounds (Regular, Expanded, Regular) atop one another

After experiencing an issue with the background image not fitting the content properly at different resolutions, I attempted to divide the background into three parts and automatically stretch the middle section to fill the space between the top and bottom ...

Develop a Modal Form using Bootstrap (HTML)

I followed a tutorial on creating a modal form with Bootstrap, you can find it here: http://www.youtube.com/watch?v=HCEbp07hfLw I replicated the steps shown in the video, but when I try to open the page in my browser, nothing appears. I have added the Bo ...

Center text vertically in a textarea

Is it feasible to vertically center the content of a <textarea> within a multi-line search box while keeping everything aligned in the middle? ...

Step-by-step tutorial for making a mesmerizing fade out grunge background

How can I achieve a fading grid background effect? I have experimented with using a conic-gradient for the background, but I am unsure how to make it fade out. background: conic-gradient(from 90deg at 1px 1px,#0000 90deg,grey 0) 0 0/50px 50px; ...

What is the best way to modify an image in a column when I hover over a table row that was dynamically inserted using a button function?

Is there a way to dynamically change an image in a column when hovering over a table row that was added through a button function? Here is the current code that I am using, but it does not seem to work as intended when I hover over the row. This function ...

Ways to customize the default font in themes by using locally stored fonts

Currently, I am utilizing Quarto for the creation of a website and attempting to modify the default fonts within a specific theme. My ultimate objective is to incorporate local Google fonts rather than relying on the Google API. In my _quarto.yml file, it ...

Looking for Angular 2 material components for dart with CSS styling? Need help centering a glyph on your page?

HTML: <div class="border"> <glyph class="center" [icon]="'star'" ></glyph> <div class="centerText"> This Is Text that is centered. </div> </div> Css: .centerText{ text-align: center ...

The lightbox feature seems to be malfunctioning, despite having successfully loaded jQuery

Struggling to activate lightbox on my gallery. Jquery is functioning as verified with an alert() in the documet.ready(). However, lightbox does not seem to be working properly. Only the links are operational. Below is a snippet of my code: <!DOCTYPE ht ...

Printing Multiple Pages Using JavaScript and Cascading Style Sheets

Encountering difficulties displaying page numbers when printing multiple multipage reports Here is the provided HTML Format : <style type="text/css> body { counter-reset: report 1 page 0; } td.footer:after { counter-increment: page; content ...

Vuetify's scrolling list feature allows for smooth navigation through a list

Check out my Vuetify code snippet that utilizes a list: <v-list> <v-list-tile v-for="user in users" :key="user.id" avatar @click="" > <v-list-tile-content> < ...

What is the process of importing a cascading style sheet into a C# object?

Currently, I am working on a web application and I would like to provide users with the flexibility to change the styling elements of CSS linked to a page through an admin screen. I have been exploring ways to load a CSS file into a C# object or convert ...

Trouble getting a sticky element to align with a two-column grid within a parent container

I'm looking to keep one column sticky in a two-column grid setup. My goal is to create a vertical navigation bar that's specific to a particular div within a single-page site, with a fixed horizontal navbar across the entire page. However, I&apos ...

Is there a single CSS property value that you want to exclude?

Is there a way to disable only one specific value of a CSS property? For example, when it comes to the 'text-decoration' property, options include none, underline, overline, line-through, blink, and inherit. I want to allow all values of text-de ...

Utilizing jQuery to Execute a Function Upon Addition or Removal of Class Names

Currently, I am working on a function that includes a conditional statement to display an alert when a specific class name is removed from a div layer. Below is the code snippet: <div class="ui-tabs-panel ui-tabs-hide">panel</div> <div>& ...

How to set the default theme color for the mat-sidenav background in Angular 6 and 7?

Is there a way to make the background of a mat-sidenav match the theme color of my mat-toolbar? In the file src\styles.scss, I have the following: @import '~@angular/material/prebuilt-themes/indigo-pink.css'; The template / HTML file incl ...

Angular is unable to eliminate the focus outline from a custom checkbox created with Boostrap

Have you noticed that Angular doesn't blur out the clicked element for some strange reason? Well, I came up with a little 'fix' for it: *:focus { outline: none !important; } It's not a perfect solution because ideally every element sh ...