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

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

<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 и не выбирать элементы внуки p.

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

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

Ответ 1

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

#content > p

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

Ответ 2

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

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