Target the last element of a specified type in CSS without selecting any of its sub

I have a main element with nested children, some of which share a common CSS class.

My goal is to select the last child of the main element without selecting the last sub-child as well.

I have attempted two methods so far:

Using :last-child

.some-class:last-child {
  background: lightblue;
}
<div class="container">
  <div class="some-class">one</div>
  <div>
      <div class="some-class">sub-one</div>
      <div class="some-class">sub-two</div>
  </div>
  <div class="some-class">two</div>
</div>

Using :last-of-type

.some-class:last-of-type {
      background: lightblue;
    }
    <div class="container">
      <div class="some-class">one</div>
      <div>
          <div class="some-class">sub-one</div>
          <div class="some-class">sub-two</div>
      </div>
      <div class="some-class">two</div>
    </div>

Currently, both methods highlight two and sub-two in blue. I only want two to be highlighted.

Answer №1

To easily style the last element of .some-class right after .container you can use the following CSS:

.container > .some-class:last-child {
  background: lightblue;
}
<div class="container">
  <div class="some-class">one</div>
    <div>
      <div class="some-class">sub-one</div>
      <div class="some-class">sub-two</div>
    </div>
  <div class="some-class">two</div>
</div>

Answer №2

Utilize the child combinator in CSS for selecting specific elements:

.container>.some-class:last-child {
  background: lightblue;
}
<div class="container">
  <div class="some-class">one</div>
  <div>
      <div class="some-class">sub-one</div>
      <div class="some-class">sub-two</div>
  </div>
  <div class="some-class">two</div>
</div>

Note that there isn't a "last-of-class" selector in CSS. The provided snippet explains how to select elements using the child combinator:

.container>.some-class:last-child
  1. This targets all elements that are the last child of their parent.
  2. It filters out elements without the CSS class "some-class".
  3. Further, it only selects elements that are children of elements with the class "container".

Your CSS styles will then be applied to the selected elements accordingly.

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

JavaScript - Image style alterations are not operating as expected

Let me break it down for you: onmouseover="imageOn(bg-index);" onmouseout="imageOff(bg-index);" I've got these two attributes set on a table tagged with ID table-title. These functions are included in an external JS file: If the name is 'bg-i ...

Angular 8 implementation of a responsive readonly input text field styled with Bootstrap 4

I want to make the input text read-only using Bootstrap. After some research on the Bootstrap website, I discovered that the form-control-plaintext class can be used for this purpose. <input type="text" readonly class="form-control-plaintext" id="stat ...

Issue with Jquery function not executing on second attempt

/** Creates a table of iTunes data in HTML format **/ var appendValues = function(songArray) { songArray.each(function() { var title = $(this).find("im\\:name").eq(0).text(); var songImage = $(this).find("im\\:image").eq(0).text(); var ...

unable to connect a value with the radio button

I am struggling to incorporate a radio group within a list of items. I am facing difficulty in setting the radio button as checked based on the value provided. Can anyone provide me with some guidance? Here is the HTML code snippet: <div *ngFor=" ...

In need of assistance with filtering lists using JQuery

Hi there! I'm looking to modify a list filtering function by targeting multiple ul tags within the same div instead of just filtering li elements. Any ideas on how this can be achieved? Below is my JavaScript code: $( document ).ready(function() { ...

What steps can be taken to implement CSS rules on an HTML element with ExtJS?

In my ExtJS 4 project, I am working on drawing an image inside a panel and slider field. My goal is to adjust the opacity of the image based on the value of the slider field. I understand that I can use CSS rules like opacity and filter:alpha(opacity=); t ...

Stop the div from expanding because of oversize text in Bootstrap

I have the following HTML source code for a Bootstrap card: <div class="card shadow-none card-fluid mb-3 mb-md-5"> <div class="row"> <div class="col-md-3 col-lg-3 mb-3 mb-sm-0"> <img class="img-fluid rounded" ...

Avoid the CSS ::before content from being highlighted

I have implemented the ::before pseudo-element for my ordered and unordered lists in my application. However, I am facing an issue where only the ordered lists are highlightable, and I am unable to change the highlight color to match the overall look of my ...

The custom CSS file is not being recognized

I am facing an issue while trying to integrate two CSS files into my website. The second CSS file seems to be ignored, even though both files are properly loaded when inspecting with the Development Tool in Chrome. Here is a snippet from my Header: <l ...

The data type "100%" cannot be assigned to a number type in the kendo-grid-column

I need the columns in the grid to have a width of 100%. <kendo-grid-column field="id" title="id" [width]="'100%'"> </kendo-grid-column> However, when I hover over the code, I get this message: The value "100%" cannot be ...

Python code to extract text data from a table using XPath

Recently, I've been using requests and lxml to develop a simple API that can fetch a timetable from a specific website. However, being new to this, I'm struggling to extract any information beyond the hours. Despite experimenting with xpath code ...

Ways to ensure CSS affects icon inside main element?

Struggling to match the background color of Material-UI icons with the rest of the list items on hover. The CSS is not applying to both the icon and text despite styling the overall class (className= "dd-content-item"). Any assistance would be greatly appr ...

Designing a responsive two-column table layout

My current challenge involves a small table structured as a bullet list with two columns. To enhance mobile display, I am seeking a way to collapse it down to a single column: https://i.sstatic.net/LqbA6.png The current implementation includes the follow ...

Is the onmouseover / onmouseout transition failing to function properly?

Is there a way to make the ease-in-out effect work without modifying the HTML code? http://jsfiddle.net/68ojLg6p/ <img class="transition-img" onmouseover="this.src='http://1.bp.blogspot.com/-ISjKMLTnaTQ/Ty-USX-J1uI/AAAAAAAAC_0/YB6MUMflRmg/s400/fe ...

Extract information from various webpages with identical URLs

I am struggling to extract data from a specific webpage (). Even though I can successfully gather information from the initial page, whenever I attempt to navigate to subsequent pages, it continues to display the same dataset. It seems to retrieve the iden ...

Alignment issue with reCAPTCHA box detected

Why can't I seem to align the reCAPTCHA form properly on my registration page? Even though the div it is within has its text-align property set to center, the form still displays on the left side of the page: However, when I use JavaScript to chang ...

A single button that performs multiple actions with just one click

Summary: Seeking assistance in implementing a button that triggers three different actions upon being clicked thrice. Detailed description: On one page of my website, there is an introduction with text and images. I currently have a button that switches t ...

I have the ability to shift text 50 pixels to the left

My navigation bar is currently aligned to the left, but I'm looking to move the text 50px from the left. Is there a way to achieve this? .navigation { width: 100%; height:35px; background-color: #f1b500; /*f2c255*/ margin-top: 4.4em; } .navig ...

Displaying an HTML button above JavaScript code

Hello, I am currently working on a project that involves displaying the Earth and I am in need of assistance with positioning some buttons on the screen. Currently, I am facing an issue where the buttons appear either above or below the JavaScript code. I ...

Sending a collection of text inputs from a web form and saving them in MongoDB

I have been attempting to store an array of strings from my HTML form into my database (MongoDB). Here's the HTML form for creating a new class: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"& ...