выбор вложенного первого дочернего элемента без использования css с css

Question

выбор вложенного первого дочернего элемента без использования css с css

0

У меня есть кусок HTML, который я не могу редактировать (без использования JavaScript).

Я пытаюсь скрыть абзац с помощью CSS. Параграф не имеет id. Есть ли способ нацеливаться только на него, а не на его братство  на CSS?

HTML:

<div id="foo">
     <div></div>
     <p> this is the paragraph to hide</p>
     <p> this one should not be affected</p>
</div>

PhilD 02 март 2014, в 23:23

Источник

Теги:

html

css

css-selectors

2 ответа

2

Это первый ребенок его родителя, поэтому вы можете однозначно выбрать это:

#foo > p:first-child

Matt Ball 02 март 2014, в 19:26

Ещё вопросы

Hashem Qolami · Accepted Answer · 2014-03-02T20-12-00.000Z

Это зависит от структуры разметки. Если  является первым дочерним элементом его родителя, вы можете использовать :first-child псевдо-класс :first-child следующим образом:

#foo p:first-child { /* or simply #foo :first-child */
    background-color: gold;
}

РАБОЧАЯ ДЕМО

Примечание. Если вы хотите выбрать только прямой дочерний a > b , вы должны использовать селектор children (a > b) как: #foo > p:first-child.

Но если есть другие братья и сестры перед первым элементом , вы можете использовать псевдокласс класса CSS3 :first-of-type для выбора первого элемента  в дереве дочерних элементов его родителя:

#foo p:first-of-type {
    background-color: gold;
}

РАБОЧАЯ ДЕМО

Опять же, для прямого ребенка вы можете использовать #foo > p:first-of-type.

Из MDN:

Псевдокласс класса :first-of-type представляет первый родной тип своего типа в списке дочерних элементов его родительского элемента.

Вы можете обратиться к моему ответу за дополнительной информацией.

Я просто использовал background-color чтобы выделить выбранный элемент. Очевидно, вы должны использовать display: none; скрыть стихию