Как работает последний ребенок/первый ребенок?

У меня вопрос, как работать first-child и last-child с элементами и классами?Как работает последний ребенок/первый ребенок?

Посмотрите на мою example

И для этого у меня есть вопрос:

Почему это правило не работает:
```
p.test1:first-child{ 
    color: green; 
} 
```
Как же изменить цвет первого элемента с классом test1?
Почему это правило работает, если аналогично примеру 1:
```
p.test1:last-child{ 
    color: white; 
} 
```

источник

2013-05-09 WooCaSh

Вы можете думать о CSS селекторы имеют одинаковый приоритет: '.test' и': первый-child' являются две отдельные, те же «уровня» селекторы, оба применяются к 'p'" parallely ", поэтому' p.test: first-child' означает '' p', который имеет класс 'test', а также является первым потомком". – Passerby

@Passerby спасибо. Хороший и короткий ответ. Но как в моем случае выбрать первый элемент с классом 'test1'? – WooCaSh

В вашей конкретной ситуации это может работать: http://jsfiddle.net/Ac9t6/12/ (для IE> = 9). Но у этого есть некоторые ограничения. – Passerby

Псевдо-класс CSS первого класса представляет собой любой элемент, который является первым дочерним элементом его родительского элемента .

Псевдокласс класса last-child представляет любой элемент, который является последним дочерним элементом его родительского элемента .

Ссылки:

http://developer.mozilla.org/en-US/docs/CSS/:first-child
http://developer.mozilla.org/en-US/docs/CSS/:last-child

1- В вашем примере p.test1 не является первым дочерним элементом своего родителя, поэтому селектор не выберите какой-либо элемент.

2- .test1: п-го из-типа (4) Обновление, заменить 4 вместо 1, а не успокаивать решение, Ref: http://www.w3.org/TR/css3-selectors/#nth-of-type-pseudo

3- Потому что это последний дочерний элемент его родитель.

Примечание: родительский элемент здесь в вашем примере - это тег body.

Пример в вопросе для дальнейшего использования:

<p>test</p> 
<p>test</p> 
<p>test</p> 
<p class="test1">test</p> 
<p class="test1">test</p> 
<p class="test1">test</p> 
<p class="test1">test</p>

источник

2013-05-09 03:09:44 Arbel

Все отлично, но '.test1: nth-of-type (1)' не работает. Работаю только при написании '.test1: nth-of-type (4) 'где 4-й элемент сначала с классом' test1' ... Это странно. – WooCaSh

'.test1: nth-of-type (1)' не делает то, что вы думаете. См. Http://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class/8539107#8539107 для объяснения. – BoltClock

@BoltClock Спасибо! – Arbel

Первый ребенок/последний ребенок по отношению к родительскому элементу. В вашем примере нет элемента p.test, который является первым дочерним элементом его родительского элемента (контейнер JsFiddle). Вместо этого первый ребенок является простым p-элементом. Если вы установите класс .test на первый p-элемент, он станет зеленым.

источник

2013-05-09 03:07:40 Whistletoe

Как работает последний ребенок/первый ребенок?

ответ

Смежные вопросы