Выбор элементов детей, но НЕ внуков

Question

У меня есть следующий упрощенный код:

<div id="content">
    <p>text</p>

    <div id="container">
        <div id="col1">
            <p>text</p>
        </div>
        <div id="col2">
            <p>text</p>
        </div>
    </div>

    <p>text</p>
    </div>
</div>

Всякий раз, когда я устанавливаю некоторые значения для элемента #content p в файле CSS, изменения также применяются к #col1 p и #col2 p.

Я бы хотел выбрать только дочерние элементы p элемента #content div и не выбирать элементы p внуков.

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

Есть ли лучший способ сделать это в CSS2 или CSS3?

Answer 1

Используйте CSS Больше, чем знак > ( Дочерние селекторы ):

#content > p

Дочерний селектор соответствует, когда элемент является дочерним для некоторого элемента.

Answer 2

Вы также можете установить другой стиль для более глубоких элементов <p>, которые переопределяют уже указанный.Вот так:

#content p { color: red; }
#content div p { color: black; }