Having trouble getting the `nth-of-type` and `nth-child` selectors in CSS to function

I am attempting to apply a green color for the first nth child flag element

<div id="axis">
     <div class="super"></div>
     <div class="flag">flag 1</div><!-- I want this text to be green-->
     <div class="super"></div>
     <div class="flag">flag 2</div>
     <div class="super"></div>
     <div class="flag">flag3</div>
     <div class="super"></div>
</div>

Css:

#axis{
    color:red;
}

#axis .flag:nth-of-type(1){
    color:green;  
}

#axis .flag:nth-child(1){
    color:green;
}

I have attempted both scenarios but it is not working...

Fiddle

htmlcsscss-selectors

Answer №1

Here is an alternative solution DEMO

<ul id="axis">
    <li class="icon">icon 1</li>
    <li class="icon">icon 2</li>
    <li class="icon">icon 3</li>
</ul>

.icon {
    list-style:none;
    color:blue;
}


.icon:nth-of-type(1) {

    color:purple;  
}

Answer №2

To accomplish this task in an alternate way:

<div id="axis">
    <div class="super"></div>
    <div class="flag">flag 1</div><!-- Let's make this text green-->
    <div class="super"></div>
    <div class="flag">flag 2</div>
    <div class="super"></div>
    <div class="flag">flag3</div>
    <div class="super"></div>
</div>

Using CSS:

#axis > div:nth-child(2) {
    color: green;
}

Another approach:

Implement a shared CSS snippet:

.flag {
   /* Insert styles for the first .flag element here */
   /* These styles will initially apply to all .flag elements, but will be overridden later */
}

.flag + .flag{
    /* Override the previous styles */
    /* Apply css to all .flag elements except the first one */
}

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

The inefficiency of invoking Jquery on elements that do not exist for the purpose of caching

What is the impact if JQuery attempts to access elements that do not exist? Will there be any significant CPU overhead other than script loading? Does it matter if this is done for a class or an id? For optimization purposes and to minimize simultaneous c ...

javascriptjqueryhtml

Adjusting the style attributes for Material-UI Icons

I could use some assistance with changing the CSS property of MUI icons in order to assign a specific color when the icon is focused. I have implemented the icons in the header and am displaying different pages below them, so I would like to give each ac ...

cssmaterial-ui

"Implementing a search bar feature using HTML, CSS, and

My attempt to implement a search bar CSS from CodePen is not working properly in React. Even though I used the exact code provided, the search bar seems to be buggy. If you want to take a look at the code sandbox for better reference, you can visit: https ...

htmlcssreactjs

Troubleshooting: Datepicker not appearing in Bootstrap

Here is the detailed markup for the datepicker component: <div class="form-group row"> <div class="col-xs-3 col-md-offset-9"> <label class="control-label">Pick Date</label> <div class="input-group date" id="dp3" data-d ...

javascriptjqueryhtmlcsstwitter-bootstrap

Retrieve the content from an HTML table cell enclosed within a division tag

I am currently facing an issue where I need to extract the value from a specific div in order to proceed with the program. The value that I am trying to retrieve is '12345678'. <td id="TransaccionTesoreriaRetencionItems_NroComprobanteRete ...

htmlpython-3.xseleniumselenium-chromedriver

The transparency feature using rgba is not supported in the Chrome browser for Android

Have you noticed the transparency effect in certain divs using the rgba CSS property? Strangely, Chrome on my ASUS tablet and Samsung S3 mini Galaxy smartphone does not seem to support this feature. Surprisingly, Internet Explorer does! Any insights on w ...

androidcssgoogle-chrome

An HTML document may display a segment of a URL

Is there a way to display part of a URL in an HTML document, so that if the URL changes, the corresponding content in the body also updates? For instance, www.example.com/?key=i - Is it possible for this link to be dynamically displayed within the body o ...

javascripthtml

Dealing with CSS overflow issues in Safari, Chrome, and the ancient IE 6

Are Safari and Chrome compatible with overflow? How does IE 6 or higher handle overflow? ...

css

Interact with jQuery to trigger events upon clicking on a list item, excluding checkboxes within the list

I'm in the process of developing a straightforward web application. I have a dynamically generated list on one section: Subsequently, I set up an event that triggers when any element within the list is clicked: $(document).on('click', &apo ...

javascriptjqueryhtmlcheckbox

The battle between nested flexbox heights and max-heights

Note: I am observing some unusual behavior on Chrome 72. FireFox 64 seems to be working fine! I am experiencing an issue with a nested flexbox. In the code snippet below, I have added an artificial XL height to .root.container in order to achieve the des ...

htmlcssgoogle-chromefirefoxflexbox

What could be causing the issue of CSS Styles not being applied to an Angular 2 component with Vaadin elements?

Currently, I am immersed in the tutorial on Vaadin elements using Angular 2 that I stumbled upon here In section 5.3, Styles are applied to the app.component.ts as shown below import { Component } from [email protected]/core'; @Component({ select ...

htmlcssangulartypescriptvaadin

Variations between <div/> and <div></div>

When using Ajax to load two divs, I discovered an interesting difference in the way they are written. If I write them like this: <div id="informCandidacyId"/> <div id="idDivFiles"/> Although both divs are being loaded, only one view is added ...

javascriptjqueryhtml

How can you find the "et-custom-css" section in WordPress?

One of the challenges I'm facing with my WordPress page is that some CSS classes are located under <style type="text/css" id="et-custom-css">. Additionally, there is a comment at the top of the CSS saying: /* - - - - - - Additional page info - ...

htmlcsswordpress

What is the reasoning behind jQuery UI employing CSS classes as opposed to pseudo-classes?

In this detailed explanation found on this website, it is discussed why jQuery UI uses CSS classes like .ui-state-active that are applied through JavaScript, rather than utilizing existing CSS pseudo-classes like :active. What is the reasoning behind thi ...

javascriptcssjquery-ui

How come a child element with a lower z-index than its parent doesn't appear behind the parent?

I'm currently investigating why a child element fails to appear behind its parent element when it has a lower z-index value than the parent. The issue seems to arise only when the default z-index value of the parent is modified. Let's consider a ...

htmlcssz-index

The div is not positioned on the left side

I'm struggling with aligning three divs next to each other in HTML and CSS. I've set them to float: left, but they are not obeying this style rule. .threethings { width: 20%; } .threethings div { text-align: center; position: relative; ...

htmlcssweb

Is it possible to make one <td> tag bold in a table if the <tr> contains two <td> tags?

I need to make the first td tag bold and apply this style to the entire table. <table> <tr> <td><strong>Cell A</strong></td> <td>Cell B</td> </tr> </table> ...

htmlcsshtml-table

Return to the beginning using Jquery Mobile

Currently, I am working on developing a mobile web app using jQuery Mobile. I am now looking to implement a back-to-top action. Typically, this can be done with the following code snippet: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

jqueryhtmlcssjquery-mobileanchor

Permit users to access downloads upon authorization

Hey there, just a quick question. I'm in the process of building a website that stores files and allows users to purchase and download them. The issue I'm facing is that the file directory is protected with .htaccess permissions to prevent unauth ...

phphtmlsecurityauthenticationweb

"Utilizing the flex box feature in IE 10 for efficient text trunc

.container { background: tomato; width: 100px; display: flex; } .text-left { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .text-right { } <div class=container> <div class="text-left"> title title title ...

htmlcssflexboxinternet-explorer-10