Choose the li element within the main ul element using only CSS

Consider the code snippet provided below:

/*ul:first-of-type li a { color: red;}
ul > li a { color: red;}
ul:first-child li a { color: red;}*/
<ul>
<li><a href="">Text</a></li>
<li><a href="">Text</a></li>
<li><a href="">Text</a></li>
<li>
<a href="">Text</a>
<ul>
<li><a href="">Text</a></li>
<li><a href="">Text</a></li>
<li><a href="">Text</a></li>
<li><a href="">Text</a></li>
<li><a href="">Text</a></li>
</ul>
</li>
<li><a href="">Text</a></li>
</ul>

My objective is to target the a elements inside the parent ul tags, excluding the nested ul within li.

I have searched through various resources but have not found a CSS solution for this problem.

Could someone please assist me in resolving this issue?

htmlcss

Answer №1

In the provided CSS code snippet, only direct li children are selected and within those, only direct a children are targeted. The second ul mentioned is a child of an li, which means its children will not be affected by this styling. To target the hyperlinks in the second ul, the following CSS selector would be needed:

ul > li > ul > li > a


ul.main > li > a {
  color: red;
}
<ul class="main">
  <li><a href="">Text</a></li>
  <li><a href="">Text</a></li>
  <li><a href="">Text</a></li>
  <li>
    <a href="">Text</a>
    <ul>
      <li><a href="">Text</a></li>
      <li><a href="">Text</a></li>
      <li><a href="">Text</a></li>
      <li><a href="">Text</a></li>
      <li><a href="">Text</a></li>
    </ul>
  </li>
  <li><a href="">Text</a></li>
</ul>

Answer №2

This CSS rule should exclusively target list items that are nested one level deep:

ul > li > a

If the above rule does not apply, then override the styling for list items on the second level of the unordered list:

ul li ul li a

ul > li > a { color: red;}
ul li ul li a { color: black;}
<ul>
<li><a href="">Text</a></li>
<li><a href="">Text</a></li>
<li><a href="">Text</a></li>
<li>
<a href="">Text</a>
<ul>
<li><a href="">Text</a></li>
<li><a href="">Text</a></li>
<li><a href="">Text</a></li>
<li><a href="">Text</a></li>
<li><a href="">Text</a></li>
</ul>
</li>
<li><a href="">Text</a></li>
</ul>

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

Conceal zoom-in function in video element for Edge and Internet Explorer

I'm trying to get rid of the zoom in control on the video tag that only shows up in Edge and Internet Explorer. I've attached a snapshot for reference. I've searched for a solution but haven't had any luck. https://i.sstatic.net/7Lx8k. ...

jquerycsshtmlhtml5-video

Creating a Bootstrap layout with a cool typing effect to position my P element in the center of a div

I've been attempting to center my text with a typing effect in the middle of this div, but I'm having trouble getting it to work. Below is the code I tried using, but it's not achieving the desired result. The text continues to display on th ...

htmlcssbootstrap-4center

Page rotates on hover effect with RotateY

How can I get an image to rotate on the Y axis when hovered over? My code works in -moz- but not in -webkit- or -o-. What am I missing? .spin-logo { height: 450px; margin: 0 auto; -moz-transition: transform 2000ms ease 0s; -o-animation: transfor ...

htmlcsstransform

The continuous cycle of animated effects using animate.css

I've been using animate.css to add animations to my elements, and here's a snippet of the code I'm working with: <button class='animated infinite pulse tada'>1</button> <button class='animated infinite pulse ta ...

javascriptjqueryhtmlcssanimation

Collect input from the user for multiple lists and send them to PHP for additional processing

I'm struggling to find the error in this code... I keep getting "undefined index user_list" as the error message. Essentially, I am trying to allow users to input values into a list and then store that entire list in a database. <?php if(isset($_ ...

javascriptphphtml

Why does Material-UI TableCell-root include a padding-right of 40px?

I'm intrigued by the reasoning behind this. I'm considering overriding it, but I want to ensure that I'm not undoing someone's hard work. .MuiTableCell-root { display: table-cell; padding: 14px 40px 14px 16px; font-size: 0. ...

javascriptcssreactjsmaterial-designmaterial-ui

"Choosing multiple options in Select2 causes it to constrict within a Bootstrap 4 inline

I am facing an issue where the field shrinks drastically when I type in it. Here's a code snippet that showcases this problem: $(function() { $("select").select2({ placeholder: "Select a word", width: "100%" }); }); <link rel ...

htmlcssjquery-select2bootstrap-4jquery-select2-4

Using the Rails framework, a basic "remote: true" request does not produce a JavaScript response

In my Rails app, I have set up an iframe to display static HTML files from the same domain. Inside the iframe, I added a link with the remote attribute in hopes of making an in-place AJAX call to create a new nested resource. Here is the code snippet: --- ...

javascriptjqueryhtmlruby-on-railsiframe

Storing the locations of draggable items with personalized user-created material

If I needed to store dynamically created content in a specific position within a container, what would be the best approach? For instance, if a user enters a YouTube URL into an input box and it generates an embedded video in a box container upon hitting ...

javascriptjqueryhtmlgoogle-chrome-extensionlocal-storage

Insert the dollar sign into a box for entering text

Is there a way to keep the dollar symbol at the beginning of a text box consistently across different browsers? The current code achieves this but with some issues in Firefox. How can I resolve this problem and improve the alignment of the dollar symbol us ...

htmlcssinputpseudo-element

Problem with CSS creating the Typewriter effect when the third line of text is added

I've been working on a website for my new company and I want to incorporate a typewriter effect on the main page. I came across a tutorial on Medium.com but I'm having trouble adding an additional span to the provided code. Take a look at the lin ...

htmlcss

Styling checkboxes with CSS may not have the desired effect

I seem to be facing a little issue here. Despite reading numerous discussions on this topic, I still can't get it to work for me... Currently, I'm working on a WordPress theme and I've hit a roadblock with CSS checkbox styling. This is the ...

htmlcss

Every attempt to make an Ajax request ends in failure

I'm struggling with my jQuery script, as the AJAX call always fails and I can't figure out why. Here is the function: <script> function submitLoanApplication() { var time = document.getElementById(&apo ...

javascriptphpjqueryhtmlajax

Having Trouble with $.ajax Function in my Program

After spending three days experimenting with various methods, I'm still unable to successfully use the Javascript ajax command to send form values to a php script. Despite no errors being displayed and the scripts running smoothly, nothing is getting ...

javascriptphpjqueryhtmlajax

A guide on showcasing Python Flask database entries in an HTML table using Jinja 2

I have a database with a table that I need to display in my web application using a specific route. My goal is to present the data from the DB in a clear and easy-to-read table format, similar to an Excel spreadsheet, through the app. Although what I hav ...

pythonhtmlflask

Customize the navbar on the screen to prevent overflow and eliminate the need for a horizontal

I have a customized navbar(bootstrap) on my webpage. <nav class='navbar fixed-top navCustom '> <div class='navComp'> <input class='dateStyle' id='dateChart' type='date' value=& ...

htmlcsstwitter-bootstrap

Adjust transparency in Bootstrap slider with picture indicator

Currently, I am in the process of creating an HTML page featuring a Bootstrap carousel. To enhance user interaction, I have replaced the standard selector with images that, when clicked, will transition the slider to display corresponding content. In orde ...

htmlcssbootstrap-4bootstrap-carousel

Begin and terminate grid columns without indicating a specific starting or ending point

In my CSS project, I am working with a class named .col3 which serves as a grid item within a div carrying the class of .container. The parent container has the property grid-template-columns: 25% 25% 25% 25%, defining its layout. I would like the .col3 ...

htmlcsscss-grid

The footer on my page seems to be having trouble connecting with the div section above it, causing it to abruptly halt in the middle

After spending a considerable amount of time, I managed to make my footer responsive by sticking it to the bottom of the page regardless of which page you are on. The code that achieved this is as follows: position: absolute; bottom: 0; However, the issu ...

css

Vue Error: "the main template must have one and only one root element"

Exploring My Component Setup components exposed: <template> <!--<post-form/>--> <div class="wrapper"> <b-table :data="posts"> <template slot-scope="props"> <b-table-column fie ...

htmlvue.js