"The issue with the nested nth-child property is that it only affects the first element it is applied to

Having trouble with the nth-child property.

The issue lies with the #subnav element. I'm unsure why nth-child isn't working as expected (supposed to change border color and width).

Here's the problem and code snippet :

<div class="container">
<!-- subnav -->
<ul id="subnav">
      <li><a href=""><span>Philosophie</span></a></li>
      <li><a href=""><span>Musiciens</span></a></li>
      <li><a href=""><span>Programmes</span></a></li>
      <li><a href=""><span>Médias</span></a></li>
      <li><a href=""><span>Agenda</span></a></li>
</ul>

and the sass portion

.container {
    #subnav {
        margin-top: 2rem;
        display: flex;
        justify-content: space-evenly;
        li {
            padding-bottom: 0.5rem;
            border-bottom: 4px 0.5rem;
            border-color: solid #f36e52;
        }
        a {
            color: #fff;
            text-decoration: none;
            span:nth-child(1):after, span:nth-child(2):after{
                content: '';
                height: 4px;
                text-align: right;
                float:right;
                margin-top: 0.3rem;
            }
            span:nth-child(1):after {
                width: 30%;
                background-color: #f36e52;
                
           }
            span:nth-child(2):after {
                content: '';
                width: 100%!important;
                background-color: #fff555;
            }
        }
    }
}

Looking to adjust the width and color of each link, currently only affecting span:nth-child(1).

Any suggestions? Appreciate the help.

htmlcsssass

Answer №1

All the spans are considered as the first child (or nth-child(1)) element, so it is recommended to use nth-child selector on the li element for proper selection.

When changing the color of links, make sure to apply the color attribute directly to the span element instead of using :after selector.

Here is the updated code structure:

#subnav {
    li {
        &:nth-child(1) {
            span {
                color: red;

                &:after {
                    content: '';
                    /*some code*/
                }
            }
        }
        &:nth-child(2) {
            span {
                color: green;
            
                &:after {
                    content: '';
                    /*some code*/
                }
            }
        }
    }
}

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

Challenges regarding placement and z-index are causing issues

Currently, I am attempting to make the menu overlap the content on my webpage. However, I am facing an issue where it moves the content box instead of overlapping it. I have already experimented with the position: relative concept, but unfortunately, the ...

javascriptjqueryhtmlcss

Mobile Chrome allows users to utilize the IFrame player API for enhanced video

Currently, I am working on creating a mobile website where I plan to include some YouTube videos using the IFrame player API (https://developers.google.com/youtube/iframe_api_reference). My main goal is to have the video start playing only after the user ...

javascripthtmlgoogle-chromemobileyoutube

What are the different ways to utilize the "%" symbol in CSS for adjusting the size of elements?

I have attempted multiple solutions, however, the percentage symbol is the only thing that is not working. I am unsure of the reason for this issue. p{ width:100%; } ...

htmlcssbootstrap-4

I'm trying to figure out how to retrieve data from a JQuery autocomplete response that contains an array. Specifically, I want

https://i.stack.imgur.com/YpuJl.pngThis form field is for entering text input. <span> <img src="images/author2.jpg" width="50" /> //The profile picture displayed here is static but in the database I have a dynamic image. <input class="sea ...

phphtmlarraysajax

Are there any methods to achieve smoother font icons on Firefox?

When it comes to using icons on different browsers, I've noticed an issue. Icons appear sharp on Google Chrome and Opera, but when viewed on Firefox they tend to look blurry if the font-size is less than 20px. Strangely enough, once the font size reac ...

cssfirefoxfontsiconsfont-smoothing

The pseudo right arrow is failing to display in the vertical center

My pseudo right arrow is not displaying vertically centered within the .nav-link class. Can anyone suggest how I can achieve vertical alignment for my right arrow in an <a> tag? I have already attempted using top:50% but it did not work. Here is th ...

htmlcss

When a form input is submitted, the webpage will refresh with a new

I have a form embedded on my WordPress page. I want to identify users without referrers so that I can set the referrer for them automatically (the referrer part is handled by a plugin). The registration form URL looks like this: The code provided below w ...

javascriptphphtmlformsappend

Removing fragment identifier from the URL

If you go to stackoverflow.com/#_=_, the expression window.location.hash will display #_=_. All good so far. But when you run window.location.hash = '' to get rid of the hash, the URL changes to stackoverflow.com/#. (Note the unexpected # at the ...

javascripthtmlurl-routingwindow.location

Improprove the performance of external banner ads by utilizing asynchronous loading or caching techniques

My website is slick, elegant, and loads quickly - that is until the banner ads come into play! A delay of up to 10 seconds in loading occurs due to waiting for the ads, which is frustrating considering the effort I put into optimizing the rest of the site. ...

phpjqueryhtmlaffiliate

Focus on selecting the first child <li> element that contains an <a> tag within it

Struggling a bit with selecting only the first child within a li tag that contains a link. HTML: <ul class="dropdown-menu" role="menu" aria-expanded="true"> <li role="presentation" class="dropdown-header">Label</li> <li><a ...

javascriptjqueryhtml

Is it possible to apply CSS based on a component's displayName?

Are you a CSS pro? I'm attempting to apply a class that will make all descendants of an element read-only, but for some reason the style isn't being applied as expected: #ComponentDisplayName * { -webkit-user-select: text; -moz-user-sel ...

javascripthtmlcssreactjscss-selectors

Get the skin image link from the app folder in Magento

I am attempting to manually insert social icons into my project. projectname/app/design/frontend/projectname/default/template/page/html/footer.phtml This is the HTML code: <a src="../">facebook</a> What is the proper method to link the imag ...

htmlcssmagentotheming

Issue with mouse hover not triggering overlay effect between two div elements

I am trying to display articles in a 2x3 matrix with article details like image, title, author, and description wrapped inside a div. I want this entire div to be overlapped by another div of the same dimensions containing a single image. Below is a snipp ...

jqueryhtmlcss

Javascript functions correctly when the HTML file is opened locally, however, it encounters issues when accessed through an http-server

My HTML file includes an embedded web widget from tradingview.com with the following code: <!-- TradingView Widget BEGIN --> <span id="tradingview-copyright"><a ref="nofollow noopener" target="_blank" href="http://www.tradingview.com" style ...

javascripthtmlcss

Make HTML design responsive to any screen size

After completing the design of a mobile app interface with dimensions 750w by 1334H, I encountered an issue where it appears too large on the app testing screen. I am seeking a way to automatically adjust the design to fit all screens without compromising ...

htmlcss

What are some strategies to prevent a fixed sidebar from obscuring content while zooming in?

I've been working on adding a fixed sidebar for a table of contents (TOC) to a website, where the sidebar stays in place as the user scrolls up and down. My implementation includes the following HTML code: https://i.sstatic.net/jAY8l.png and CSS co ...

htmlcss

Eliminating the bottom border of all buttons, except for the last three buttons in the list, solely using pure JavaScript, unless alternative methods are available

I have 3 sets of buttons, with each set containing 9 buttons stacked in 3 columns inside an ordered list (ol) within list items (li). I have removed the bottom border of the buttons to avoid double borders since they are stacked on top of each other withou ...

javascripthtmlcss

Disabling comments is creating problems with the appearance of Wordpress pages

Visit handheldtesting.com Whenever the option "disable comments" is selected in the backend, or if 'display:none:' is added <div id="respond" class="comment-respond" style="display:none;"> to the code, half of the content on the page dis ...

htmlcsswordpress

Is there a way to integrate a Python script or code directly into an HTML document?

I am currently facing a challenge while working on an assignment. The task at hand requires me to establish a connection with an Oracle database using Python in order to retrieve information about a specific table. Subsequently, I need to display this data ...

pythonhtmljinja2

What is the procedure for utilizing Javascript to redirect a user on a website back to the login page if necessary?

Is there a way to redirect a website user back to the login page if they try to access a secure page without logging in first? I'm looking to implement this using JavaScript and cookies. Any suggestions or ideas on how to achieve this seamlessly for t ...

javascripthtmlcookiesweb