css target first li in div of many divs

Question

, так что я пробовал все это с помощью first-child, и все, и все, похоже, не работают. Если у меня есть DIV установлен как например:

<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> 

, что линия CSS, которая будет в состоянии предназначаться только первый li элемент в .contentdiv (тот, с атрибутом goal="target")

теперь это может быть довольно грязным и может быть где угодно от 0 до 10 div s без li перед первым, что содержит один.

Я пробовал почти все с first-child, но он всегда нацелен на всех li, потому что они находятся в div s.

here is a jsfiddle if you want to try things

Answer 1

В CSS формат grandparent parent element child ... и :nth-child дает элемент номер, указанный вниз, так что для вашего случая, что бы

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

В вашем примере .content является в прародитель , .thing (четвертый) является родительским, и, конечно, элемент li. Пространства необходимы для различения между уровнями в CSS.

Here is a working jsFiddle

Edit без его жёстко это невозможно, чтобы выбрать первый li независимо от того, кто это родитель без JavaScript.

Вот JQuery фикс:

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

Вот прямой Javascript фикс:

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

Answer 2

OK первые вещи первой, goal является недопустимым атрибутом, так что вы не должны использовать его. Если вам нужны пользовательские атрибуты, вы должны использовать data-attributes

Для того, чтобы нацелить элемент по атрибуту, вы должны использовать attribute selector в вашем случае, если будет работать следующий селектор.

li[goal="target"]{ 

    /* Your styles go here.*/  

}