Issue with nth-child selector not functioning as expected in unordered list

I have a straightforward <nav> setup with an unordered list inside:

nav {
  position: absolute;
  right: 0px;
  white-space: nowrap;
}
nav ul {
  padding: 0;
  margin: 0;
}
nav ul li {
  clear: both;
  white-space: nowrap;
  color: white;
  display: inline-block;
}
nav ul li a {
  color: white;
  background: black;
  text-decoration: none;
  text-align: center;
  font-family: statellite;
  padding-left: 25px;
  padding-right: 25px;
  height: 37px;
  margin-left: -4px;
  padding-top: 18px;
  display: inline-block;
}
nav ul li a:hover {
  background: #000;
}
nav li a:nth-child(1):hover {
  background: red;
}
<nav>
  <ul>
    <li><a href="#">HOME</a>
    </li>
    <li><a href="#music">MUSIC</a>
    </li>
    <li><a href="#livestream">LIVESTREAM</a>
    </li>
    <li><a href="#links">LINKS</a>
    </li>
    <li><a href="#about">ABOUT</a>
    </li>
  </ul>
</nav>

I am attempting to apply a different hover color for each child <a>, but all of them end up being highlighted in red.

nav li a:nth-child(1):hover {
  background: red;
}

What could possibly be the issue?

htmlcsscss-selectors

Answer №1

All your A elements are the first child of their parent. Remember to use the nth-child selector on the LI elements, not on the A:

nav li:nth-child(1) a:hover {
  background: red;
}


nav {
  position: absolute;
  right: 0px;
  white-space: nowrap;
}
nav ul {
  padding: 0;
  margin: 0;
}
nav ul li {
  clear: both;
  white-space: nowrap;
  color: white;
  display: inline-block;
}
nav ul li a {
  color: white;
  background: black;
  text-decoration: none;
  text-align: center;
  font-family: statellite;
  padding-left: 25px;
  padding-right: 25px;
  height: 37px;
  margin-left: -4px;
  padding-top: 18px;
  display: inline-block;
}
nav ul li a:hover {
  background: #000;
}
nav li:nth-child(1) a:hover {
  background: red;
}
nav li:nth-child(2) a:hover {
  background: #555;
}
nav li:nth-child(3) a:hover {
  background: green;
}
nav li:nth-child(4) a:hover {
  background: blue;
}
<nav>
  <ul>
    <li><a href="#">HOME</a>
    </li>
    <li><a href="#music">MUSIC</a>
    </li>
    <li><a href="#livestream">LIVESTREAM</a>
    </li>
    <li><a href="#links">LINKS</a>
    </li>
    <li><a href="#about">ABOUT</a>
    </li>
  </ul>
</nav>

Answer №2

nav {
  position: absolute;
  right: 0px;
  white-space: nowrap;
}
nav ul {
  padding: 0;
  margin: 0;
}
nav ul li {
  clear: both;
  white-space: nowrap;
  color: white;
  display: inline-block;
}
nav ul li a {
  color: white;
  background: black;
  text-decoration: none;
  text-align: center;
  font-family: statellite;
  padding-left: 25px;
  padding-right: 25px;
  height: 37px;
  margin-left: -4px;
  padding-top: 18px;
  display: inline-block;
}
nav ul li a:hover {
  background: #000;
}
nav li:nth-child(1) a:hover {
  background: green;
}

nav li:nth-child(2) a:hover {
  background: blue;
}

nav li:nth-child(3) a:hover {
  background: pink;
}
<nav>
  <ul>
    <li><a href="#">HOME</a>
    </li>
    <li><a href="#music">MUSIC</a>
    </li>
    <li><a href="#livestream">LIVESTREAM</a>
    </li>
    <li><a href="#links">LINKS</a>
    </li>
    <li><a href="#about">ABOUT</a>
    </li>
  </ul>
</nav>

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 use of DIV tags allows the element to be displayed in an inline

In my project, I decided to add three div tags. The first two are positioned next to each other with the third div tag placed below them. However, when I tried to insert a slideshow into the first div tag, all of the div tags ended up displaying as "block" ...

javascriptjqueryhtmlcssinline

How can I replicate the functionality of the span element using Javascript?

Using Javascript, I am able to display a paragraph without the need for HTML. By adding it to an HTML id, I can manipulate individual words within the text. My goal is to make specific words cursive while keeping the entire paragraph in its original font s ...

javascripthtml

Issue with Hiding Bootstrap Tabbed Content Correctly

I am currently struggling to make a Bootstrap tab field function correctly, encountering some obstacles along the way. While the content is successfully tabbing between each div, the issue I'm facing is that the content from each tab is actually bein ...

jquerycsstwitter-bootstrap

Are you in favor of side-to-side scrolling?

I can't quite recall where I've encountered this concept before, but I do know that there must be a method for creating a horizontal scroll. Imagine you have multiple DIVs in the following structure: <div class="container"> <div> ...

htmlcss

Is there a way to have only the <a> tag be clickable in an unordered list, without making the entire list item clickable?

I just need the text to be made clickable instead of the entire list item block. <a class="menu_head">Hello</a> <ul class="menu_body"> <li><a href="#">Sub-menu 1</a></li> <li><a href="#">Sub-menu 2 ...

htmlcss

Displaying the Price of a Product in a Different Location on Your Wordpress Site

I am attempting to display the price of a product within a post using HTML code. My goal is to use $product->get_price(). However, I need a way to specify which product to call by identifying it with its code or something similar. In essence, all I am ...

phphtmlwordpress

Creating HTML code for a mobile responsive design

I am facing an issue with my clinic webpage where the images appear differently on PC and mobile devices. I am new to HTML and CSS, so I tried using max-width: 100% but it didn't work. The code was originally created by someone else and I need help fi ...

htmlcssresponsive

mentioning a JSON key that includes a period

How can I reference a specific field from the JSON data in Angular? { "elements": [ { "LCSSEASON.IDA2A2": "351453", "LCSSEASON.BRANCHIDITERATIONINFO": "335697" }, { "LCSSEASON.IDA2A2": "353995", "LCSSEASON.BRANCHIDITER ...

javascripthtmlangularjsjsontypescript

Modify the text and purpose of the button

I have a button that I would like to customize. Here is the HTML code for the button: <button class="uk-button uk-position-bottom" onclick="search.start()">Start search</button> The corresponding JavaScript code is as follows: var search = n ...

javascriptjqueryhtml

When linking to a section, the Bootstrap navbar obscures the top part of

I have been working on my inaugural website for educational purposes and encountered the following issue: Every time I try to link to a specific section on the same page, it opens as intended but the top portion is obscured by the navbar. <body data-s ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Centered title in side menu for Ionic 3

I recently utilized the Ionic CLI to create an Ionic project. The version I am working with is Ionic 3. Currently, I am facing a challenge in centering the title image. Any assistance on this matter would be greatly appreciated. <ion-menu [content]=" ...

cssangularionic-frameworkionic3

Shiny Chrome, Flexible Flexbox, and plump div elements

Looking to enhance my understanding of flexbox. Encountering a display issue in Chrome where the right column is too wide and the left column is too skinny, while it displays correctly in Firefox. Any suggestions on how to fix this for Chrome? .child ...

htmlcssgoogle-chromeflexbox

deleting hyperlink on mobile device

I'm trying to hide a specific div when the screen size is mobile, and currently I have: HTML <div id='top-btn'> <a class="fade-in" href="...">Top</a> </div> CSS #top-btn a { visibility: visible; opacity: 1 ...

htmlcss

What is the best way to display multiple HTML files using node.js?

click here to see the image Here is my server.js file. Using express, I have successfully rendered the list.html and css files on my server. However, I am encountering an issue when trying to navigate from list.html to other html files by entering localho ...

htmlcssnode.jsexpressmariadb

Load images in advance using jQuery to ensure they are cached and retrieve their original sizes before other activities can proceed

When a user clicks on a thumbnail, I aim to display the full-size image in a div. To achieve this, I want to determine the original size of the image based on its source URL before it loads, allowing me to set the appropriate dimensions for the container. ...

javascriptjqueryhtmlcssimage

Navigating through directories in an HTML file

In my directory, the folders are named in uppercase letters and have the following structure: ONLINESHOP |-- index.html |-- COMPONENTS |-- CONFIG |-- TEMPLATES |-- CSS |-- main-style.css |-- CONTROLLERS |-- MODE ...

htmlcssrelative-path

Create a line break in an alert using PHP

<?php function alert($msg) { echo "<script type='text/javascript'>alert('$msg');</script>"; } if(array_key_exists('btnRegisterAdmins', $_POST)) { $fname = $_POST['FirstName']; $lname=$_POST['La ...

javascriptphpjqueryhtml

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

Searching for all choices within a select dropdown using Selenium and Python

There's a website called noveltop (.net) that hosts web novels, and on each chapter page, there is a dropdown menu where you can select the chapter you want to jump to. I've been using Selenium with Python and the Firefox (or Chrome) driver to e ...

javascriptpythonhtmlselenium

Having trouble with the functionality of my JavaScript slider

After attempting to incorporate a slider into my website, I encountered an issue where the slider was not functioning as expected. The slider I tried to implement can be found here: https://codepen.io/amitasaurus/pen/OMbmPO The index of the site can be a ...

jqueryhtmlcss