Unexpected outcomes occur from CSS nesting

Question

Unexpected outcomes occur from CSS nesting

Today I realized there is still so much to learn about CSS. How is it possible that the CSS style below produces that outcome?

Stylesheet:

li.item a:first-child {color: red}

HTML List:


    <ul class="mylist">
        <li class="item"><a href="#">item 1</a>
            <ul>
                <li class"child"><a href="#">child item 1</li>
                <li class="child"><a href="#">child item 1</li>
            </ul>
        </li>
    </ul>

Despite the fact that the <a> inside <li class="child"> is not the a:first-child of <li class="item">, it still appears red. Why is that so? Is there another way to only target the first <a> within <li class="item"> without modifying the HTML?

How do I specifically select only the first <a> within li.item?

css nested

Answer 1

Answer №1

That's because by styling all a:first-child elements, it includes the ones nested further down the hierarchy.

If you only want to target the top level a element, you can use the following code:

li.item > a {color: red}

See Demo

The > selector specifies that the a tag should be directly inside an li.item tag.

Answer 2

That's because by styling all a:first-child elements, it includes the ones nested further down the hierarchy.

If you only want to target the top level a element, you can use the following code:

li.item > a {color: red}

See Demo

The > selector specifies that the a tag should be directly inside an li.item tag.

Answer 3

Answer №2

Understanding the functionality of a selector is key when writing code.

li.item a:first-child {color: red}

In this code snippet, you are targeting all a elements that are the first children of an item. For instance, the first a in the second li meets this condition as it is the first a element in its own list.

If you want to specifically target only the direct child, you can use > to signify this:

li.item > a:first-child {color: red}

You can see this in action in the provided jsFiddle example below.

http://jsfiddle.net/Hp4x8/2/

Answer 4

Understanding the functionality of a selector is key when writing code.

li.item a:first-child {color: red}

In this code snippet, you are targeting all a elements that are the first children of an item. For instance, the first a in the second li meets this condition as it is the first a element in its own list.

If you want to specifically target only the direct child, you can use > to signify this:

li.item > a:first-child {color: red}

You can see this in action in the provided jsFiddle example below.

http://jsfiddle.net/Hp4x8/2/

Unexpected outcomes occur from CSS nesting

Answer №1

See Demo

Answer №2

Similar questions

Buttons within the Bootstrap carousel caption cannot be clicked

How come my wrapper box doesn't extend to the full width of the screen when I set it to width: 100%?

The <a> tag does not have the clickability feature

Tips for synchronizing the movement of a nested div with its parent during zoom operations

New post: The vue component that was released lacks CSS (NPM)

Tips for aligning hyperlinks in the navigation bar using CSS3 and HTML5

Replace the css variables provided by the Angular library with custom ones

How can one locate a particular element/style/class in the dev tools DOM while debugging in MUI v5?

CSS vertical alignment: Getting it just right

Apply border-radius to the group of columns in CSS

Is there a way to eliminate unknown white gaps in the content?

How can you easily center content vertically on a web page?

Display a div in front of another using Material UI when hovering

Easy Registration Page using HTML, CSS, and JavaScript

What methods can I use to create a navigation bar similar to this design?

After running assets:install and assetic:dump, Font Awesome fonts are no longer functioning properly

Is there a way to adjust the width of my web layout without sacrificing its responsiveness?

Using jQuery to manipulate the image within a specific div element

How can you trigger a modal to appear when an image is clicked?

Choose CSS Option