Ссылка на класс CSS только внутри определенного элемента

Question

Я пытаюсь найти синтаксис CSS для конкретной проблемы. Я действительно искал, но не смог найти ответ. Вот в чем проблема. Мой HTML разметка выглядит следующим образом:

<div> 
<header> 
    <div class="container"> 
    <div class="row"> 
    my content that I want red 
    </div> 
    </div> 
</header> 
<div class="container"> 
    <div class="row"> 
    my content that I want blue 
    </div> 
</div> 
</header> 

Я хотел бы показать «свое содержание, что я хочу красный» в красном цвете, и «мое содержание, что я хочу синий» в синем, и я могу только использовать CSS для этого ,

Кто-нибудь знает трюк, который это сделает? К сожалению, к югу отсюда не работают.

Спасибо заранее,

Answer 1

Есть много вариантов. Все зависит от ваших обстоятельств. Вот пара без изменения HTML:

Использование родительского элемента

.row { color: blue } 
header .row { color: red } 

Использование :nth-of-type

.column:nth-of-type(1) .row { color: red } 
.column:nth-of-type(2) .row { color: blue } 

Если вы готовы, чтобы добавить дополнительную разметку, вы всегда можете добавить дополнительные классы.

Answer 2

Вы можете выбрать 1-й DIV для красного, 2 для синего, если порядок остается прежним.

Возможно, вам понадобится родительский контейнер. Является ли тэг заголовка родителем обоих контейнеров?

Answer 3

Вы, вероятно, не искали очень трудно. The W3C has defined over a dozen selectors.

Здесь вы будете использовать

header > div.container { 
    color: red; 
} 

div > div.container { 
    color:blue; 
} 

Угол скобка (>) является первый селектор ребенка. Поскольку второй container не является первым дочерним элементом header, он не будет иметь красный текст. Аналогично, поскольку container с красным текстом является первым ребенком header, а не div, он, и только он, будет иметь красный текст.

Answer 4

Вы можете использовать CSS п-о-типа

:nth-of-type 

FIDDLE: http://jsfiddle.net/wn2BL/