How can I use a CSS selector to highlight the last adjacent elements with the same class?
In the example code below, the first three and last two elements share the same class.
However, I am looking to specifically highlight Two, Threee and Six, Seven.
<ul>
<li class="a">One</li>
<li class="a">Two</li>
<li class="a">Three</li>
<li>Four</li>
<li>Five</li>
<li class="a">Six</li>
<li class="a">Seven</li>
</ul>
When highlighting elements with the class 'a', excluding the first element:
.a:not(:first-of-type) {
color: pink;
}
Presenting to you:
li:first-child ~ .a {
background-color: blue;
}
Using the nth-child selector, you can target specific <li> elements.
ul li:nth-child(2),
ul li:nth-child(3),
ul li:nth-child(6),
ul li:nth-child(7) { color: #a00; font-weight: bold; }<ul>
<li class="a">One</li>
<li class="a">Two</li>
<li class="a">Three</li>
<li>Four</li>
<li>Five</li>
<li class="a">Six</li>
<li class="a">Seven</li>
</ul>You can also choose to exclude the first element with class .a:
ul li.a:not(:first-of-type) { color: #a00; font-weight: bold; }<ul>
<li class="a">One</li>
<li class="a">Two</li>
<li class="a">Three</li>
<li>Four</li>
<li>Five</li>
<li class="a">Six</li>
<li class="a">Seven</li>
</ul>Here is a suggestion you can consider:
.a {
background: yellow;
}
.a:first-child {
background: initial;
}<ul>
<li class="a">One</li>
<li class="a">Two</li>
<li class="a">Three</li>
<li>Four</li>
<li>Five</li>
<li class="a">Six</li>
<li class="a">Seven</li>
</ul>IN BRIEF:
Identify and style the last two elements with the same class that are adjacent to each other.
To achieve this effect, use the following CSS selector:
.a:nth-last-child(2),
.a:nth-last-child(2) + .a {
...
}
A demonstration showcasing the selector in action is provided below with two unordered lists. Note how only the first list is affected due to having two adjacent elements of the same class at the end.
.a:nth-last-child(2),
.a:nth-last-child(2) + .a {
color: blue;
background: #cce5ff;
}<ul>
<li class="a">One</li>
<li class="a">Two</li>
<li class="a">Three</li>
<li>Four</li>
<li>Five</li>
<li class="a">Six</li>
<li class="a">Seven</li>
</ul>
<ul>
<li class="a">One</li>
<li class="a">Two</li>
<li class="a">Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li class="a">Seven</li>
<li>Eight</li>
<li class="a">Nine</li>
</ul>OTHER SELECTORS:
This selection targets the initial two elements sharing a class along with the adjoining final two elements within a parent container.
.a:nth-child(2),
.a:nth-child(3),
.a:nth-last-child(2),
.a:nth-last-child(2) + .a {
color: blue;
background: #cce5ff;
}<ul>
<li class="a">One</li>
<li class="a">Two</li>
<li class="a">Three</li>
<li>Four</li>
<li>Five</li>
<li class="a">Six</li>
<li class="a">Seven</li>
</ul>
<ul>
<li class="a">One</li>
<li class="a">Two</li>
<li class="a">Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li class="a">Eight</li>
<li class="a">Nine</li>
</ul>Selects all instances of the specified class, excluding the first occurrence, within a parent container.
.a:not(:first-child) {
color: blue;
background: #cce5ff;
}
/*
Functions equivalently to .a:not(:first-child)
*/
.a:not(:nth-child(1)) {
font-weight: bold;
}<ul>
<li class="a">One</li>
<li class="a">Two</li>
<li class="a">Three</li>
<li>Four</li>
<li>Five</li>
<li class="a">Six</li>
<li class="a">Seven</li>
</ul>
<ul>
<li class="a">One</li>
<li class="a">Two</li>
<li class="a">Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li class="a">Eight</li>
<li class="a">Nine</li>
</ul>Targets the second, third, sixth, and seventh occurrences of the designated class when their child node matches that of the selector. (Note: This does not have the desired effect on the second unordered list)
.a:nth-child(2),
.a:nth-child(3),
.a:nth-child(6),
.a:nth-child(7) {
color: blue;
background: #cce5ff;
}<ul>
<li class="a">One</li>
<li class="a">Two</li>
<li class="a">Three</li>
<li>Four</li>
<li>Five</li>
<li class="a">Six</li>
<li class="a">Seven</li>
</ul>
<ul>
<li class="a">One</li>
<li class="a">Two</li>
<li class="a">Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li class="a">Eight</li>
<li class="a">Nine</li>
</ul>I recently integrated a slider from into my website, following the installation instructions. However, I seem to be facing some conflicts with another script that controls animated div movements on the same page. Upon loading the page, all elements of th ...
How can I prevent the letters from extending beyond the bar when typing a lot of characters? Your assistance in resolving this issue is greatly appreciated. <div id="tasks-container"> <div id="tasks-header"> ...
After avoiding HTML/CSS for a long time, I finally decided to dive in and create a simple CSS grid website with 3 items in the grid. Everything was working well and looking exactly as I wanted it to: However, I had the idea of using the entire Aside-Items ...
Looking for help with customizing my "product" slider, lightSlider. I want the middle div to always be highlighted when navigating through the slider. Here's what it looks like currently: Link to screenshot - current. My goal is to achieve this look: ...
I am struggling to make fadeToggle work properly. I want to reveal text when clicking on another div. Since I plan to use this for multiple elements, I am looking for a smart and efficient way to handle them all. Here is my current attempt which does not ...
I have two files, home.html and mobilehome.html, and I am trying to switch between them when the screen width goes below a certain size. if (screen.width <= 600) { document.location = "HomeMobile.html"; } This approach works well in Respon ...
I am currently seeking a method to seamlessly insert an image within the text of my Django-powered blog. My goal is to achieve a layout similar to the one showcased in this example: https://i.stack.imgur.com/cFKgG.png The desired layout consists of two c ...
I have successfully added 3 print buttons to my website, each one designed to print a specific portion (div) of the webpage. Here is the code snippet for this functionality: function printPage(id) { var html="<html>"; //html+="<link rel="st ...
I want a functionality where opening one div closes all the others. I've searched around for solutions and only found jQuery options, not pure JavaScript ones. Here is my code: function openDescription(description_id) { var x = document.getEle ...
I am currently working on a single-page application using Angular 10. I have a simple page layout and I want to implement a feature that will highlight the navbar based on the scroll position. How can I achieve this functionality in a single-page applicati ...
Today has been a frustrating day as I am diving into the world of tailwindcss and have been struggling with a particular issue. My code is below: <button className="bg-yellow-500 px-4 py-2 hover:text-black text-white"> Some Text Her ...
In my current project, I am using bootstreap v3.2. I am facing an issue where I need to display fetched content from the database on a page using the <pre></pre> tags. However, the problem is that the content is being displayed with the default ...
My website features a sleek navbar fixed to the top of the window. As users scroll past a specific div, the background color of the navbar changes seamlessly. This functionality has been working flawlessly for me thus far. However, upon adding anchor link ...
When it comes to developing mobile websites for various platforms such as iPhone 3 and 4, Android, Blackberry Torch, etc., I usually find myself needing to slice images based on the specific platform. The challenge arises from constantly having to slice im ...
What is the correct way to style a class with CSS and write HTML code? .first{ color:red; } Here is an example of HTML code: <class id=first> <p> some text </p> <p> some other text </p> ...
Having trouble with an issue. Let me explain. I implemented a scrollTop Jquery on page load that scrolls down after a delay to prompt user action. However, I'm facing a problem where another scrollTop doesn't work after clicking buttons "#b3,#b3 ...
One of my current challenges involves using Semantic UI and embedding it within an iFrame tag to display a video. However, I am struggling to adjust the height of the Semantic UI element. <div className="video_box ui embed"> ...
I am encountering an issue with the Flexslider module on my Drupal 7 website. I have created a simple slider that displays 3 photos. I enabled touch screen functionality for the slider, and everything seems to be working fine except for one problem - all t ...
I'm looking to create a button on my webpage using an image that will link to other pages. I want the flexibility to use both small and large text on this button. The specific image I want to use is: So far, I've attempted some coding but haven ...