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 am currently utilizing Angular 2+ [innerHTML] input for inserting HTML formatting that includes style tags. Within my template, the code looks like this: <span [innerHTML]="someVar"></span> In the component file, I have defined: someVar = ...
I'm having some trouble getting a radio button with Font Awesome to work properly within an HTML table. Outside of the table, it functions as expected, but inside the table, it only seems to hide/show between the two states without displaying the chec ...
I'm in the process of developing a forum and encountering some challenges with CSS. My goal is to extend the white area all the way to the right edge of the gray background, leaving a gap of around 5px/10px. I've experimented with different CSS ...
I am experiencing an issue on my website where the post text fluctuates rapidly when the mouse hovers over the image. I have a site where I display the post text on mouseover of the image. Can someone please help me solve this problem? You can test it by ...
I am encountering a paragraph overlap issue while using a bootstrap template, specifically on smartphones like iPhone 6 with Safari. Interestingly, the problem does not appear when testing on a browser by shrinking the window size to the minimum. On the ph ...
I'm encountering an issue with my CSS style that works fine on a static HTML page. The problem arises when content is dynamically loaded into layer3 and then into layer 2. I'm struggling to understand the consistency as sometimes the layers are ...
I have finally mastered the art of setting up and executing the "node compile.js" file in the claro theme folder to compile each *.less file into its corresponding *.css file. However, I noticed that the old claro.css file remains unchanged. Is this the in ...
After diving into the streamlit components documentation, it became clear that rendering HTML code for the label parameter of the st.expander() function is not supported. Is there a way to work around this limitation? My exact requirement is as follows: ...
Is there a method to ensure the header, container, and footer encompass the entire layout without using fixed positioning in CSS? Check out this HTML fiddle for reference. <div class="wrapper"> <header> <img src="https://www.ecobin.co ...
I'm a beginner at coding and working on this project for fun. I'm almost done, but I can't get rid of a white space that's dividing my header from the first section. See the screenshot below: https://i.stack.imgur.com/a1flt.png Even af ...
Struggling to center the opt-in form on my website, I've created a "center" class with margin properties but it's not working as expected. .center { margin-left: auto; margin-right: auto; width: 100% } I suspect that one of Bootstrap's cla ...
In my ReactJS + Material-UI project, I am working with an array named colors that contains different color strings such as "white", "blue", and "green. My goal is to render each color string as a <MenuItem/> within a <DropDownMenu/> component ( ...
I am seeking assistance on inserting text within the border I created using an image. As I continue to add more text, I want it to display within the border as I type. Any guidance you can provide would be greatly appreciated. Thank you! li { list-sty ...
Is there a way to make both the button and the link light up simultaneously when hovering over the div element, instead of just the button lighting up first? <div id="b1"; class = b> <a href="test.html">BUY</a> < ...
I am attempting to link a css stylesheet to my basic html webpage. I am utilizing parse.com hosting for dynamic webpages that utilize express. There are numerous responses to this question, but none of them have proven successful in my case. I am trying ...
I'm currently developing a project that involves displaying speech bubbles next to each list item when hovered over. These speech bubbles contain relevant information specific to the item being hovered on. To achieve this functionality, I've crea ...
In our project, we have downloaded the Dojo and jQuery libraries from Google CDNs. I am currently seeking a Java tool that can both cache and minify these libraries. The caching process should take place within the ROOT project of Tomcat. While I am awar ...
I am trying to align the "Click me" button to the left of the div that contains it. Here is my code: render = () => { return ( <Wrapper> <Body> <span>Title</span> <Desc ...
Here is the HTML code snippet that I am currently working with: <div class="row"> <div class="col-sm-3 col-md-2 sidebar"> <ul class="nav nav-sidebar" data-ng-controller="NavbarController"> <li class="nav-item" ...
If I have the following CSS code: .example { background-color: rgba(0, 0, 0, 0.5); border-color: rgba(0, 0, 0, 0.5); } Even though the background-color and border-color share the same rgba value, they appear as different colors due to how the bor ...