CSS: Select the final child within a parent element depending on the specific class assigned to the child element

Is there a way to change the text color of 5 to red?

I've tried some solutions, but nothing seems to work. Any ideas on how to fix this issue?

Please Note: This example is just a simplified version of the actual problem, so the structure and quantity of child elements may vary.

#parent>.child:last-of-type {
        color: red;
      }
<div id="parent">
        <span class="child">1</span><br>
        <a>2</a><br>
        <span class="child">3</span><br>
        <a>4</a><br>
        <span class="child">5</span><br>
        <span>6</span>
      </div>

htmlcsscss-selectors

Answer №1

Check out this code snippet

#parent span:nth-child(11) {
  color: blue;
}
<div id="main">
  <span class="child">7</span><br>
  <a>8</a><br>
  <span class="child">9</span><br>
  <a>10</a><br>
  <span class="child">11</span><br>
  <span>12</span>
</div>

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

Generate a custom comment page for every URL identifier

I am currently working on creating a PHP comment page that displays unique comments for each specific URL ID. However, I have encountered an issue where the comment page is shared among all URLs. I understand that I need to add the URL ID (bug ID) to the M ...

phphtmlajax

Tips for preventing DIV elements from overlapping

In the process of creating a CSS design for a SIM game I enjoy playing, a client requested four boxes: two large ones with two smaller ones aligned horizontally in between. Everything was going smoothly until I attempted to add headers to the boxes. The en ...

htmlcssalignment

Navigating to the left while implementing right-to-left formatting on a single webpage

I'm currently working on a website and I decided to make it right-to-left (RTL). Everything looks good on the website, except for one specific page. I'm experiencing some difficulties in implementing RTL on this particular page. Although the ot ...

csswordpresswordpress-themingoverflowright-to-left

The jquery.blockUI plugin seems to be malfunctioning

Trying to disable a simple div: <div id="MyDiv"> </div> Here is the code I used: $('#MyDiv').blockUI({ message: '<h1>This has been blocked!</h1>', css: { border: '3px solid #a00' } }); Issue ...

jqueryjquery-uihtmljquery-pluginsjquery-blockui

Is there a way I can ensure that my buttons shrink as the screen size changes?

After generating buttons using my JavaScript code based on contents from a JSON file, I utilized a display grid structure to arrange them with a maximum of 2 buttons per row. However, there seems to be a styling issue as the larger buttons overflow off the ...

javascriptcssbuttonstyling

problems arising from the alignment of floating divs

I am struggling with aligning the image "logo.jpg" in a left-floated div. How can I center it both vertically and horizontally within the code below? Thank you. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm ...

css

Match the input fields with the corresponding table columns

Could you assist me in adjusting the alignment of my inputs? I am looking to position them above the last two columns ("Primary price" and "Secondary price"). To provide clarity, I have included a wireframe. https://i.sstatic.net/Zq983.jpg I attempted to ...

htmlcssbootstrap-4

Creating a Custom Bookmark Title for Apple Touch Icon on Mobile Homescreen

Can the title of a touch icon on the homescreen of an iOS device be customized? https://i.sstatic.net/9YL0t.jpg While it's currently acceptable, I am interested in creating a custom title instead of using a default one. ...

htmliosfavicon

I am looking to remove the magnificent popup jQuery effect

Appreciate the assistance so far. This issue is a bit tricky for me, as it involves jquery which I'm not well-versed in. My aim is to make my image clickable. <div class="col-lg-6 col-sm-12 mt-3"> <a class="portfolio-box" href="im ...

jqueryhtmlcssbootstrap-4

The functionality of updating input values via jQuery AJAX in HTML response is currently not functioning as expected

Hello, I need some assistance. I'm encountering difficulty with jQuery in modifying HTML values that are dynamically inserted through an AJAX response. Here is the link to the JSFiddle. Below is the HTML on the page: <button id="test">test&l ...

javascriptjqueryhtmlajax

JavaScript Functions for Beginners

I'm currently facing some challenges with transferring the scripts and HTML content from the calendar on refdesk.com. My task involves moving the JavaScript to a separate stylesheet and utilizing those functions to replicate the calendar on an HTML pa ...

javascripthtmlcalendar

Generating PDFs from websites using code

Currently, I have my resume available online as an HTML page at www.mysite.com/resume.html. Whenever I need a PDF version of it, I rely on Google Chrome's print dialog to save it as a PDF using my print CSS stylesheet. However, I am looking for a way ...

cssgoogle-chromepdfprintingresume

Issues arise with the functionality of Zurb Foundation 5 tabs

Utilizing the tabs feature in ZURB Foundation 5, I've noticed that clicking on a tab changes the hash in the URL. However, I actually want to prevent this behavior as I rely on the hash for managing page loads. Although I attempted to use preventDef ...

javascriptjqueryhtmlcsszurb-foundation-5

Importing CSS and JavaScript files into a JSP page in Spring MVC

After adding a CSS file to my JSP file, I encountered an issue that prompted me to search for solutions. Despite trying the tutorial from the following link, it did not work for me: My project was created using Spring Tool Suite and here is my file struct ...

javacssspringjspspring-mvc

There seems to be an issue with configuring placeholders in Tailwind CSS

After deciding to switch to using only tailwind CSS, I noticed that on a particular page there were inputs with transitions but no icon on the inner left side. Adjusting the colors and position of the placeholder helped prevent collisions between the icon ...

htmltailwind-css

Tips for showcasing the currently active item in a Bootstrap dropdown menu using jQuery

I am trying to highlight the menu item that is selected in a drop-down menu. I attempted the following code, which works if I prevent the default behavior of the link element, but I do not want to do that. So I tried using local storage instead, but it d ...

javascriptjqueryhtmlcsstwitter-bootstrap

VueJS Error: Unable to access the 'className' property of an undefined variable

I'm currently working on a menu design project where I need to highlight the active tab/page that the user is on by adding a color class and utilizing JavaScript to update the active link. Here's a snippet of my template: <div class="menu ...

javascriptcssvue.js

When using React <p> and Tailwind, the text overflow occurs in either the X or Y axis, despite specifying Y specifically

I am building a React frontend using TailwindCSS 2.2, and I have these two texts inside a <p> dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd ...

htmlcssreactjstailwind-css

Insert data into a drop-down menu and organize it

When I choose a value in one Select, the other options are removed and the previous value is added to them. How can I use JQuery to add the previous value to Select and then sort it alphabetically? ...

javascriptjqueryhtml

As I enlarge the font size, the border around the div also expands

Can someone explain why the size of the div border increases along with the font size? If you'd like to see an example, check out this link to a jsFiddle: LINK TO JS FIDDLE: http://jsfiddle.net/krishna22211/m14qms52 ...

javascripthtmlcss