Использование CSS для получения отдельного контроля внешних элементов 3

Question

у меня есть 3x?Сетка дивов.Я хочу выбрать div с пометкой a и применить поле слева: -20px;Также я хотел бы выбрать div, помеченные b и применить поле справа -20px;

http://jsfiddle.net/98qVL/18/ Вот пример.

Каков наиболее эффективный семантический способ для достижения этой цели?

Answer 1

Вы можете легко сделать это с помощью селектора nth-child, если вы не хотите добавлять отдельные классы к каждому div.

Например

#parent .grid:nth-child(3n+1){
    background:blue; }

#parent .grid:nth-child(3n+3){
    background:red; }

будет делать то, что вы хотите.

Пример: http://jsfiddle.net/98qVL/21/

Эта статья дает хороший обзор того, как работает :nth-child: http://css -tricks.com / как-п-й ребенок-произведения /

Answer 2

Вы не можете выбирать элементы в CSS по их содержимому.

Однако, чтобы делать то, что вы пытаетесь сделать, вы могли бы использовать nth-child как это:

.grid:nth-child(3n+1) {
    background: red;
}
.grid:nth-child(3n) {
    background: blue;
}​

Первая часть выбирает каждый элемент с классом grid, который сразу же заменяет каждый третий элемент с классом grid и применяет красный фон.Этот селектор также включает первый элемент, благодаря +1.

Вторая часть выбирает каждый третий элемент grid и применяет синий фон.

Используйте это в ваших интересах, чтобы применитьполя, где они должны быть применены. Вот демо снова.