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

Question

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

The easiest thing to do is to add an extra class to one of them so you can target it much easier — Huangism, Aug 06 '15 at 14:27
I know feel very silly. I tried that before with little success but your comment made me realize that I had not been changing all of the class tags in the css the incorporate the new class. thank you for relieving my blindness! — Mr__Goat, Aug 06 '15 at 14:34
Your HTML is invalid, you can't use a div before a li. Correct your html to use ul > li > ul > li structure and add classes accordingly. Then you can use nth-child selector to do whatever you want to achieve. — Zeno Popovici, Aug 06 '15 at 14:35
@ Zeno thank you for the tip. For others these are some great articles about the structure I have been reading to help with mine! http://learn.shayhowe.com/html-css/creating-lists/ + http://stackoverflow.com/questions/549689/why-should-i-use-li-instead-of-div — Mr__Goat, Aug 06 '15 at 14:58

score 0 · Answer 1 · answered Aug 06 '15 at 14:44

0

Try using the 'adjacent sibling selector' (+):

ul.drop-nav div.flyout + div.flyout ul.flyout-nav {
    /* css for the second flyout */
}

JSFiddle Demo

answered Aug 06 '15 at 14:44

JRulle

7,448
6
39
61

score 0 · Accepted Answer · answered Aug 06 '15 at 14:46

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/

score 0 · Answer 3 · answered Aug 06 '15 at 14:47

I believe Mr__Goat wants to select the two elements individually so he can apply different styling to each. The following CSS selectors will refer to each element individually.

/* First .flyout-nav */
.drop-nav .flyout-nav:nth-of-type(1) {
}

/* Second .flyout-nav */
.drop-nav .flyout-nav:nth-of-type(2) {
}

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

3 Answers3