Choose the following N sibling elements related to the chosen element, each with a distinct class using CSS (LESS)

I have the following HTML code. Suppose I can add the selected-day class by clicking on each span. My goal is to select the next 6 siblings, starting from the element with the selected-day class. Here is what I have so far:

#calendar span.day.selected-day {
  background-color: red;
  ~ span:nth-child(n + 6):nth-child(-n + 15) {
    background-color: red;
  }
}
<div id="calendar">
<span class="day">1</span>
<span class="day">2</span>
...
<span class="day selected-day">6</span>
<span class="day">7</span>
<span class="day">8</span>
...
<span class="day">16</span>
</div>

It highlights the selected days correctly at first like this:

https://i.sstatic.net/6U1ky.png

However, when I change the selection, it doesn't behave as expected:

https://i.sstatic.net/ckQuo.png

Is there a better way to always choose the next 6 siblings relative to the element with the specified class?

htmlcssless

Answer №1

Even though it may not appear very elegant, one way to achieve this is by using multiple selectors. For those who do not use less, here's an example written in native css.

#calendar span.day.selected-day + span,
#calendar span.day.selected-day + span + span,
#calendar span.day.selected-day + span + span + span,
#calendar span.day.selected-day + span + span + span + span,
#calendar span.day.selected-day + span + span + span + span + span,
#calendar span.day.selected-day + span + span + span + span + span + span {
    background-color: red;
}

Edit: I also attempted to implement this in LESS

#calendar span.day.selected-day {
  background-color: red;
  + span,
  + span + span,
  + span + span + span,
  + span + span + span + span,
  + span + span + span + span + span,
  + span + span + span + span + span + span
  {
    background-color: red;
  }
}

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

Header displayed on each page. (WordPress)

(my website: ) I am using Wordpress.org and I am trying to create a button that will redirect the user back to the front page, but I am having trouble figuring out how to do it. The button should be located in the top left corner of the site and should not ...

phpcsswordpresswordpress-theming

Problem arising from selecting checkbox label

Every time I click on the checkbox label, it automatically scrolls to the top of the page. I even removed all scripts and styles from the code, yet the issue persists. My suspicion is that it may be related to the loop, so I am currently investigating fur ...

jqueryhtmlruby-on-rails

The video link was not found during the page scraping process

I'm trying to download a video from the page below: After inspecting with Firebug, I found the video url, <video src="https://09-lvl3-pdl.vimeocdn.com/01/1449/2/57246728/138634997.mp4?expires=1457996449&amp;token=089e435c20e7781d36fce" preloa ...

pythonhtmlseleniumvideoweb-scraping

CommentsController#new encountered a NoMethodError due to an undefined method called 'text' for the Comment with the following attributes: id: nil, author: nil, created_at: nil, updated_at: nil

I'm currently integrating rails with react to include a comments section in the app I am developing. While the /comments page is functional, I encountered an error when attempting to create a new comment. Despite consulting the guide I am following, t ...

htmlruby-on-railsruby-on-rails-4reactjserb

What steps should I take to successfully integrate my Dojo DataGrid into a Dojo ContentPane that is nested within a Dojo TabContainer?

It seems that the issue arises from having different settings for parseOnLoad in the separate widgets. I have experimented with both true and false values but without success. To troubleshoot, I created three web pages - two containing TabContainer and Dat ...

htmldojodojox.grid.datagrid

Inserting a PHP variable ($username) into a form field

<form method="POST"> <h1>Contact Us</h1> <span><h2 class="required">*Required</h2></span> <div class="input-group"> <label class="sr-only">First Name</label> <input class="text" ...

phphtml

What could be causing the 'margin-top' property not to function as expected?

Although I understand the concept of 'margin-collapse', I am puzzled as to why there is no visible 10 px margin on the top of the first box here. The top box, which has the id 'first', should have a 10px margin above it. If this method ...

cssmargin

Utilize a external API to fetch JSON data from the website and showcase it on a webpage in a asynchronous manner

<!DOCTYPE html> <html> <head> <script> src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script> </head> <body> <input type="text" placeholder="Enter Your Zip Code" id="zipCode ...

htmljsonxml

Make all cells in bootstrap table appear in bold font

Is it possible to have normal text in the cells of a Bootstrap 4 table without bold formatting? Using font-weight doesn't seem to be working for me. <div class="row col-md-10 px-4 py-3 "> <table id="ServiceTable" class="table table-hover ...

htmlcssbootstrap-4

Differences in divider line width when viewed on Chrome only

While working on a multi-format editable date/time widget, I happened to notice that the divider line in one of the widgets appeared thicker when compared to others (particularly thicker in the one with the red text): https://i.sstatic.net/BVNiT.png Here ...

htmlcssgoogle-chromesass

Steps for creating a hyperlink that exclusively opens in Chrome and includes a disable flag

I am looking to create a hyperlink that will launch chrome with the flag --disable-hang-monitor, followed by opening the website https:\\randomwebsite.com. Here is the location for Google Chrome: c:\program Files(x86)\Google\Chrom ...

javascriptc#html.nethyperlink

HTML documents do not show images

I'm having trouble displaying the same picture three times. It seems like a simple task, but for some reason, it's not working correctly. ...

htmlimage

Using jQuery, you can create and add an element to the page when a user clicks

Currently, my webpage contains numerous anchor tags that link to various video files, along with a single div element: <a href="http://www.example.com/example-1.mkv" class="video">1</a> <a href="http://www.example.com/example-2.mkv" class=" ...

javascriptjqueryhtml

Tips for showcasing unprocessed JSON information on a webpage

Similar Question: JSON pretty print using JavaScript I am looking to present my raw JSON data on an HTML page similar to how JSONView displays it. Here is an example of my raw JSON data: { "hey":"guy", "anumber":243, "anobject":{ "whoa ...

javascriptjqueryhtmlcssjson

I'm looking for the best way to display an error message in HTML using a custom validation directive that I'm creating

<!DOCTYPE html> <html><!--starting of html--> <script src="angular.js"></script> <body ng-app="myApp"> <p>Feel free to type in the input field:</p> <form name="myForm"> <input name="myInput" type=" ...

htmlangularjsnode.js

Create a duplicate <li> element and animate it using jQuery

Here are the list items: <ul> <li>...</li> <li>...</li> <li>...</li> <li>...</li> <li>...</li> <li>...</li> <li>...</li> <li>...</li> <li>...</l ...

javascriptjqueryhtmlcsshtml-lists

dragging and dropping files for easy upload

Here is a challenge I am facing: I am looking for a solution that allows users to drag multiple images from their local file system onto the flash/flex/html5 app. The app should then extract the file name details and communicate with the server. Once t ...

flashapache-flexhtmlfile-upload

What is the best way to show a block of text when hovering over an image with a smooth easing effect

How can I make a block of text appear with ease when hovering over an image of a tree? The current setup works, but the transition effect is not as smooth as I want it to be: HTML: <p id="hover-text1" class="hover-text1"> Accomplished! </p> & ...

javascripthtmljquerycsshover

Center a list-group with text and dropdown using Bootstrap 4 vertical alignment

I am relatively new to using Bootstrap 4 and I am encountering challenges in vertically aligning certain elements within a list-group. Specifically, I have text on the left side and a dropdown on the right. <div class="dashboard-blocks"> <ul cl ...

htmlcssbootstrap-4

Internal VS External Stylesheets: What you need to know

I'm currently in the process of developing a website and I have started utilizing the style tag at the beginning: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" ...

htmlcssstyles