css在许多div的div中定位第一个li

Question

so I have been trying all this stuff with first-child and everything and none seem to be working. If I have a div set up as such:

<div class="content">
    <div class="thing">
        abd
    </div>
    <div class="thing">

    </div>
    <div class="thing">
        123
    </div>
    <div class="thing">
        <li class="list" goal="target">
            1
        </li>
    </div>
    <div class="thing">
        <li class="list">
            2
        </li>
    </div>
    <div class="thing">
        <li class="list">
            3
        </li>
    </div>
    <div class="thing">
        <li class="list">
            4
        </li>
    </div>
</div>

what line of css that will be able to target only the first li element in the .content div (the one with the attribute goal="target" )

now this can be fairly messy and there can be anywhere from 0 to 10 div s without a li before the first that contains one.

I have tried nearly anything with first-child , but it always targets every single li because they are in div s.

here is a jsfiddle if you want to try things

Answer 1

In CSS the format is grandparent parent element child ... and :nth-child gives you the element the number specified down, so for your case that would be

.content .thing:nth-child(4) li {
   /* CSS goes here */
}

In your example .content is the grandparent, .thing (the fourth one) is the parent, and of course the li is the element. Spaces are required for distinguishing in between levels in CSS.

Here is a working jsFiddle

Edit Without it being hard coded it's impossible to select the first li no matter who it's parent is without javascript.

Here is a jQuery fix:

$('.content').find("li").eq(0).css({ /* CSS goes here */});

Here is a straight javascript fix:

var elems = document.getElementsByTagName('li')[0];
elems.style.property="value";

Answer 2

OK first things first, goal is an invalid attribute so you shouldn't be using it. If you need custom attributes you should be using data-attributes

In order to target an element by attribute you should be using an attribute selector in your case the following selector would work.

li[goal="target"]{

    /* Your styles go here.*/    

}