Struggling with pinpointing the specific element

I'm struggling to select an element within a nested <ul>.

In this code snippet, my goal is to pinpoint the <a> tag that follows the parent <li>

<ul class="wc-block-product-categories-list wc-block-product-categories-list--depth-0">
    <li class="wc-block-product-categories-list-item">
        <a style="" href="#"> <!-- Target this link -->
            <span class="wc-block-product-categories-list-item__name">text</span>
        </a>
        <ul class="wc-block-product-categories-list wc-block-product-categories-list--depth-1">
            <li class="wc-block-product-categories-list-item">
                <a style="" href="#">
                    <span class="wc-block-product-categories-list-item__name">text</span>
                </a>
            </li>
            <li class="wc-block-product-categories-list-item">
                <a style="" href="#">
                    <span class="wc-block-product-categories-list-item__name">text</span>
                </a>
            </li>
            <li class="wc-block-product-categories-list-item">
                <a style="" href="#">
                    <span class="wc-block-product-categories-list-item__name">text</span>
                </a>
            </li>
            <li class="wc-block-product-categories-list-item">
                <a style="" href="#">
                    <span class="wc-block-product-categories-list-item__name">text</span>
                </a>
            </li>
        </ul>
    </li>
    <li class="wc-block-product-categories-list-item">
        <a style="" href="#"> <!-- Target this link -->
            <span class="wc-block-product-categories-list-item__name">text</span>
        </a>
        <ul class="wc-block-product-categories-list wc-block-product-categories-list--depth-1">
            <li class="wc-block-product-categories-list-item">
                <a style="" href="#">
                    <span class="wc-block-product-categories-list-item__name">text</span>
                </a>
            </li>
            <li class="wc-block-product-categories-list-item">
                <a style="" href="#">
                    <span class="wc-block-product-categories-list-item__name">text</span>
                </a>
            </li>
            <li class="wc-block-product-categories-list-item">
                <a style="" href="#">
                    <span class="wc-block-product-categories-list-item__name">text</span>
                </a>
            </li>
        </ul>
    </li>
</ul>

I've attempted using various selectors like child selectors (>), adjacent and general sibling selectors (~ and +), pseudo-classes (:first-child) but have been unable to access that specific hyperlink.

css

Answer №1

Make sure to use the *--depth-0 parent class for reference:

.wc-block-product-categories-list--depth-0 > li > a {

}

For example:

.wc-block-product-categories-list--depth-0 > li > a {
  background: red;
}
<ul class="wc-block-product-categories-list wc-block-product-categories-list--depth-0">
    <li class="wc-block-product-categories-list-item">
        <a style="" href="#"> <!-- This link is the target -->
            <span class="wc-block-product-categories-list-item__name">text</span>
        </a>
        <ul class="wc-block-product-categories-list wc-block-product-categories-list--depth-1">
            <li class="wc-block-product-categories-list-item">
                <a style="" href="#">
                    <span class="wc-block-product-categories-list-item__name">text</span>
                </a>
            </li>
            <li class="wc-block-product-categories-list-item">
                <a style="" href="#">
                    <span class="wc-block-product-categories-list-item__name">text</span>
                </a>
            </li>
            <li class="wc-block-product-categories-list-item">
                <a style="" href="#">
                    <span class="wc-block-product-categories-list-item__name">text</span>
                </a>
            </li>
            <li class="wc-block-product-categories-list-item">
                <a style="" href="#">
                    <span class="wc-block-product-categories-list-item__name">text</span>
                </a>
            </li>
        </ul>
    </li>
    <li class="wc-block-product-categories-list-item">
        <a style="" href="#"> <!-- This link is the target -->
            <span class="wc-block-product-categories-list-item__name">text</span>
        </a>
        <ul class="wc-block-product-categories-list wc-block-product-categories-list--depth-1">
            <li class="wc-block-product-categories-list-item">
                <a style="" href="#">
                    <span class="wc-block-product-categories-list-item__name">text</span>
                </a>
            </li>
            <li class="wc-block-product-categories-list-item">
                <a style="" href="#">
                    <span class="wc-block-product-categories-list-item__name">text</span>
                </a>
            </li>
            <li class="wc-block-product-categories-list-item">
                <a style="" href="#">
                    <span class="wc-block-product-categories-list-item__name">text</span>
                </a>
            </li>
        </ul>
    </li>
</ul>

Answer №2

To specifically target only the first child of the first list item, you can utilize the `li:first-child` selector. However, if your aim is to style the first link in all direct descendant list items, then omit the `:first-child` pseudo-selector.

It's important to note the class name of the UL element, as it provides a unique identifier for the first list item.

.wc-block-product-categories-list--depth-0 > li:first-child > a {
  color: red
}
<ul class="wc-block-product-categories-list wc-block-product-categories-list--depth-0">
    <li class="wc-block-product-categories-list-item">
        <a style="" href="#"> <!-- Target this link -->
            <span class="wc-block-product-categories-list-item__name">text</span>
        </a>
        <ul class="wc-block-product-categories-list wc-block-product-categories-list--depth-1">
            <li class="wc-block-product-categories-list-item">
                <a style="" href="#">
                    <span class="wc-block-product-categories-list-item__name">text</span>
                </a>
            </li>
            <li class="wc-block-product-categories-list-item">
                <a style="" href="#">
                    <span class="wc-block-product-categories-list-item__name">text</span>
                </a>
            </li>
            <li class="wc-block-product-categories-list-item">
                <a style="" href="#">
                    <span class="wc-block-product-categories-list-item__name">text</span>
                </a>
            </li>
            <li class="wc-block-product-categories-list-item">
                <a style="" href="#">
                    <span class="wc-block-product-categories-list-item__name">text</span>
                </a>
            </li>
        </ul>
    </li>
    <li class="wc-block-product-categories-list-item">
        <a style="" href="#"> <!-- Target this link -->
            <span class="wc-block-product-categories-list-item__name">text</span>
        </a>
        <ul class="wc-block-product-categories-list wc-block-product-categories-list--depth-1">
            <li class="wc-block-product-categories-list-item">
                <a style="" href="#">
                    <span class="wc-block-product-categories-list-item__name">text</span>
                </a>
            </li>
            <li class="wc-block-product-categories-list-item">
                <a style="" href="#">
                    <span class="wc-block-product-categories-list-item__name">text</span>
                </a>
            </li>
            <li class="wc-block-product-categories-list-item">
                <a style="" href="#">
                    <span class="wc-block-product-categories-list-item__name">text</span>
                </a>
            </li>
        </ul>
    </li>
</ul>

Answer №3

To select an element without using a class name, you can style it if it's not a descendant of another list item:

:not(li) > ul > li > a {}

* Just for fun and exploring alternative ways to achieve the same result...

:not(li) > ul > li > a {
  color: red;
}
<ul class="wc-block-product-categories-list wc-block-product-categories-list--depth-0">
    <li class="wc-block-product-categories-list-item">
        <a style="" href="#"> <!-- Style this link -->
            <span class="wc-block-product-categories-list-item__name">text</span>
        </a>
        <ul class="wc-block-product-categories-list wc-block-product-categories-list--depth-1">
            <li class="wc-block-product-categories-list-item">
                <a style=""" href="#">
                    <span class="wc-block-product-categories-list-item__name">text</span>
                </a>
            </li>
            <li class="wc-block-product-categories-list-item">
                <a style="" href="#">
                    <span class="wc-block-product-categories-list-item__name">text</span>
                </a>
            </li>
            <li class="wc-block-product-categories-list-item">
                <a style="" href="#">
                    <span class="wc-block-product-categories-list-item__name">text</span>
                </a>
            </li>
            <li class="wc-block-product-categories-list-item">
                <a style="" href="#">
                    <span class="wc-block-product-categories-list-item__name">text</span>
                </a>
            </li>
        </ul>
    </li>
    <li class="wc-block-product-categories-list-item">>
        <a style="" href="#"> <!-- Style this link -->
            <span class="wc-block-product-categories-list-item__name">text</span>
        </a>
        <ul class="wc-block-product-categories-list wc-block-product-categories-list--depth-1">
            <li class="wc-block-product-categories-list-item">
                <a style="" href="#">
                    <span class="wc-block-product-categories-list-item__name">text</span>
                </a>
            </li>
            <li class="wc-block-product-categories-list-item">
                <a style="" href="#">
                    <span class="wc-block-product-categories-list-item__name">text</span>
                </a>
            </li>
            <li class="wc-block-product-categories-list-item">
                <a style="" href="#">
                    <span class="wc-block-product-categories-list-item__name">text</span>
                </a>
            </li>
        </ul>
    </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

The Jquery .remove() function will only take effect after the second click

I am currently working on implementing a notifications feature using bootstrap popover. The issue I am facing is that after a user clicks on a notification, it should be removed. However, for some reason, it requires two clicks to actually remove the notif ...

javascriptjquerycsstwitter-bootstrappopover

Dynamic extension of classes in SCSSORExtending classes

When working with Vue, I encountered a situation similar to :style="{ [`--chip-bg-hover`]: hoverColorValue, [`--chip-bg-active`]: activeColor, [`--chip-border-hover`]: borderHoverColorValue, }" Then, i ...

cssvue.jssass

Angular: Design dependent on attributes

Can I customize the styling of a div in accordance with a boolean property called "isActive" on my controller using Angular? <div class="col-md-3" (click)="isActive = !isActive"> <div class="center"> <i class="fa fa-calendar"& ...

javascriptcssangular

Creating a search form in Bootstrap 4 that is centered and expands to full width only on small screens

I'm currently working with a bootstrap v.4 navbar that has 3 elements in it. I've managed to align the elements evenly so that the search bar is centered in the navbar. However, when it collapses it takes up the full width of the screen. Here is ...

htmlcsstwitter-bootstrap

How about a CSS grid featuring squares with square images?

Just like the inquiry found on this page, I am striving to construct a grid of perfect squares, each containing an image with 100% height. The issue arises from utilizing the padding-bottom: 100%; height: 0 method, which prevents height: 100% from functio ...

htmlcsscss-grid

bring in all the files located within the Directory

Is there a way to import all CSS files from a specific folder without having to import each file individually? Looking to import assets/css/* ? <link href="<?php echo base_url(); ?>assets/css/*" rel="stylesheet"/> <title&g ...

javascriptphphtmlcsshead

Tips for managing a date picker with JavaScript using the Selenium WebDriver

I have been attempting to scrape a travel website using Selenium Webdriver and Python. While I have successfully set the destination (destino) and place of origin (origem), I am encountering difficulties when trying to select a date. I understand that Ja ...

javascriptpythoncssselenium

What is the best way to align a text element to the right and a PNG element to the left within a

I am currently working on setting up a navigation bar with a PNG link in the top left corner, and a text element "menu" in the top right corner. Despite my efforts, I have not been successful in achieving this layout using "float: right;" The code snippet ...

htmlcss

Achieve a seamless transition for the AppBar to extend beyond the bounds of its container in Material

I am finalizing my app structure by enclosing it within an MUI Container with maxWidth set to false. The issue I'm facing is that the AppBar inside the container doesn't span the full width of the screen due to paddingX property enforced by the c ...

cssreactjssassflexboxmaterial-ui

Improving code quality and consistency in Javascript: Tips for writing better code

Hey, I've been experimenting with some code using ajax and have ended up with a lot of repetitive lines. Is there a way to streamline the code without losing functionality? I keep using the .done method multiple times when I could probably just use it ...

javascripthtmljquerycss

Modify the pseudo element when a different class is active

I've encountered an issue while attempting to modify the after pseudo element when the .active class is applied. Despite my efforts, it doesn't seem to be functioning as intended. My current project setup involves using scss with Vue. I have tri ...

css

Is there a way to conceal :before content in the parent element by hovering over the child element?

Here is the HTML code I currently have: <li *ngFor="let menu of menus" class="{{ menu.attributes.class }} menu-items" [attr.data-title]="menu.label"> <a [routerLink]="[menu.url||'/']" [queryParams]="menu.refParameter3 ? menu.refPara ...

htmlcssangular

Ensure the HTML table automatically adjusts its size to accommodate all contents without any text wrapping

I currently have a table that spans 100% of the window width. Here is a simplified structure of the table (CSS/styles removed for clarity) <table> <tbody> <tr> <td>Row ID</td> <td> ...

htmlcss

After applying the rotateY function, the z-index appears to be malfunctioning

My current project involves creating a page flip effect, which requires two overlapping div elements. Initially, both divs are side by side with the second div having a -webkit-translateY(180deg) property applied to it. The first div has a z-index of 2, wh ...

htmlcss

Ways to centrally position elements in a Bootstrap table

I came across this query and tried implementing the style mentioned, but unfortunately, my table items are not aligned vertically: https://i.sstatic.net/rMqSR.png This is how the HTML appears: .table > tbody > tr > td { vertical-align ...

htmlcsstwitter-bootstrapbootstrap-4

Creating a minimalistic floating placeholder in HTML and CSS without the need to define a background color for the placeholder

Hey there, I'm currently working on implementing a floating placeholder for an input field. However, I'm facing an issue where I don't want to set the placeholder with a background color due to the varying input backgrounds and styles in my ...

htmlcssreactjsinputsass

Authentication using a singular input

Struggling to design an input for a verification code with just one input instead of four. However, I am facing some challenges: The input is not responding correctly when clicked, it's a bit buggy and requires clicking at the end of the input to typ ...

htmlcss

:after pseudo-element along with HTML tags

I have recently designed a basic webpage in an attempt to simulate ajax using CSS. In order to achieve this, I aimed to create hidden radio buttons with visible labels, and load an external CSS file when the user clicks on a label. However, I encountered o ...

htmlcss

The text within a textarea that is set to 100% width extends outside of its

I'm encountering an issue with a textarea (and potentially any input element) appearing too wide when the width is set to 100%. Below is my CSS code. Firstly, I am resetting all styles. html, body, div, span, applet, object, iframe, h1, h2, h3, h4, ...

htmlcss

What impact does CSS scaling transform have on the flow of a document?

I'm really confused about the impact of scaling an element using CSS transforms on the document flow. Take a look at this jsbin or this codepen (since jsbin seems to be down), where I have set up the following structure: p{slipsum text} #scaled #s ...

csstransform