Search code examples
htmlcsscode-organizationcss-specificity

How to select child elements, of the same name, separately under two different parents, of the same name

I am very new to this and my code is probably very sloppy, excessive and redundant, so I apologize for that.

I am trying to add one final piece to my nav bar. Here is the HTML, a fiddle will be attached at the bottom.

<body>
    <div id="container">
        <header class="main-header">
            <ul class="main-nav">
                <li> <a id="h" href=".html">_______ _______ __________</a> </li>
            </ul>
            <ul class="second-nav">
                <li> <a id="a" href=".html">_____ __</a> </li>
                <li class="dropdown"> <a id="p" href=".html">_________</a>
                    <ul class="drop-nav">
                        <div class="flyout">
                            <li> <a id="r" href=".html">___________</a> </li>
                            <ul class="flyout-nav">
                                <li> <a href=".html">___</a> </li>
                                <li> <a href=".html">______ _ _____</a> </li>
                                <li> <a href=".html">______ ________</a> </li>
                            </ul>
                        </div>
                        <div class="flyout">
                            <li> <a id="c" href=".html">__________</a> </li>
                            <ul class="flyout-nav">
                                <li> <a href=".html">______ ________</a> </li>
                                <li> <a href=".html">___________</a> </li>
                                <li> <a href=".html">______ _____</a> </li>
                            </ul>
                        </div>
                        <li> <a href=".html">______ _______</a> </li>
                    </ul>
                </li>
                <li> <a href=".html">_______ __</a> </li>
            </ul>
        </header>

I am attempting to select the two different "flyout-nav"s individually, however I cannot seem to find the correct specificity to select each individually.

All I need to do is round the top left corner on the second "flyout-nav" while keeping the first "flyout-nav"s top left corner square.

I believe my problem is that when I try to select the first child of the "flyout" is selects both "flyout-nav"s as they are both the first children and I have been looking into nth-children and other child selectors but to no avail. At this point after combing through the code for a few days now attempting to make it more efficient and find an order that will make it work I need some new eyes on the code to see what my eyes have been blinded to.

Here is the Jsfiddle with my css (note css is probably more sloppy than my code, still attempting to figure out the whole organization thing).

Thank you for the assistance and please don't hesitate to ask me to clarify anything.

Fix: I changed the second "flyout-nav" to "flyout-nav1" and then updated all of the css that was associated with "flyout-nav" to also incorporate "flyout-nav1"

new Jsfiddle here

Solution

  • Your HTML structure is invalid. This is a valid HTML structure.

    <!DOCTYPE html>
<head>
<title>Test</title>
</head>
<body>
    <div id="container">
        <header class="main-header">
            <ul class="main-nav">
                <li>
                    <a id="h" href=".html">_______ _______ __________</a>
                </li>
            </ul>
            <ul class="second-nav">
                <li>
                    <a id="a" href=".html">_____ __</a>
                </li>
                <li class="dropdown"> <a id="p" href=".html">_________</a>
                    <ul class="drop-nav">
                        <li class="flyout">
                            <a id="r" href=".html">___________</a>
                            <ul class="flyout-nav">
                                <li><a href=".html">___</a>

                                </li>
                                <li><a href=".html">______ _ _____</a>

                                </li>
                                <li><a href=".html">______ ________</a>

                                </li>
                            </ul>
                        </li>
                        <li class="flyout">
                            <a id="c" href=".html">__________</a>
                            <ul class="flyout-nav">
                                <li><a href=".html">______ ________</a>

                                </li>
                                <li><a href=".html">___________</a>

                                </li>
                                <li><a href=".html">______ _____</a>

                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href=".html">______ _______</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href=".html">_______ __</a>
                </li>
            </ul>
        </header>
    </div>
</body>

    Then use :nth-child() selector, or add a custom class.

    Try out nth-child here: https://css-tricks.com/examples/nth-child-tester/