CSS: Выбор детского комбинатора и: первый ребенок?

Question

У меня есть div с некоторыми другими div s, некоторые абзацы и некоторые изображения в нем. Это в основном выглядит следующим образом:

<div id="parent"> 
    <div> 
     This image is inside a div. 
     <img src="http://www.placehold.it/100" alt="" /> 
    </div> 
    <p> 
     And this inside a paragraph. 
     <img src="http://www.placehold.it/100" alt="" /> 
    </p> 
    <img src="http://www.placehold.it/100" alt="" /> 
    <img src="http://www.placehold.it/100" alt="" /> 
</div> 

Теперь я только хочу, чтобы выбрать изображения, которые не вложены в другой div или p. Я делаю это с помощью переключателя комбинатора ребенка:

#parent > img { 
    border: 1px solid red; 
} 

Это работает, но теперь я только хочу, чтобы выбрать первое, без вложенного изображения. Я попробовал это, как это, но без какого-либо результата:

#parent > img:first-child { 
    border: 1px solid blue; 
} 

http://jsfiddle.net/vF2DU/

Как мне это сделать? Есть ли способ без добавления класса или идентификатора, например #first?

Answer 1

Вы можете использовать селектор first-of-type или nth-of-type.

В этом случае first-of-type, вероятно, более уместно, но я покажу вам синтаксис как ниже:

---

О первом из-типа:

« : селектор first-of-type соответствует каждому элементу, который является первым дочерним элементом определенного типа его родителя. "

первый в типа пример:

#parent > img:first-of-type { 
    border: 1px solid blue; 
} 

Вот working jsFiddle для first-of-type в отношении вашего использования.

---

О п-го из-типа:

«The: тип п-го из-(п) селектор соответствует каждому элементу, который является п-й ребенка, определенного типа, из его родитель. n может быть числом, ключевым словом или формулой. "

п-го из-типа Пример:

#parent > img:nth-of-type(1) { 
    border: 1px solid blue; 
} 

Вот working jsFiddle для nth-of-type в отношении вашего использования.

---

Поддержка:

Оба поддерживаются во всех основных браузерах - Chrome, Firefox, Opera и Internet Explorer (IE9 и выше).Если вы заинтересованы в том, чтобы заставить их работать отлично в IE8 и раньше, посмотрите Selectivizr.

Answer 2

:first-child средства first-child, не первый встреченный элемент типа. Вам нужен :first-of-type селектор. working example