Как выбрать только элемент внутри div через css

Question

В моем приложении мне нужно извлечь данные, которые находятся внутри элемента div, и исключить текст, который находится внутри элемента абзаца, который также является дочерним элементом элемента div.

Сниппет выглядит

<div class ="hrt"> 
    This is div text 
    <p>This is paragraph text</p> 
</div> 

Через Css Selector я хочу, чтобы извлечь текст Div:
В вышеописанном случае я хочу, чтобы мое решение было: Это ДИВ текст

Answer 1

Вы не может нацеливать текстовые узлы на CSS. Вы должны обернуть их элементом (span или любым другим).

Если вы не можете изменить свой HTML-контент, вам понадобится JS.

Оставить комментарий, если вам нужна помощь для достижения этой цели с помощью JS.

Answer 2

Возможно, вы можете просто применить display: none к дочернему элементу.

.hrt { 
 
    font-weight: bold; 
 
} 
 
.hrt p { 
 
    display: none; 
 
}

<div class ="hrt"> 
 
    This is div text 
 
    <p>This is paragraph text</p> 
 
</div>

Answer 3

Вы можете попробовать это так:

.hrt { 
    font-weight: bold; 
} 

.hrt>* { 
    font-weight: initial; 
} 

Таким образом, ваш стиль будет влиять только элементы контента, а не его дети.

Answer 4

У вас есть два варианта.

Вариант один

Обертка первый текст в элементе и стиля, что:

.hrt>p:first-child { 
 
    font-weight: bold; 
 
}

<div class="hrt"> 
 
    <p>This is div text</p> 
 
    <p>This is paragraph text</p> 
 
</div>

Вариант два

Первый стиль текста в div, чем ove rwrite текст в пункте:

.hrt { 
 
    font-weight: 900; 
 
} 
 
.hrt p { 
 
    font-weight: 100; 
 
} 
 
/* or to target all elements 
 
.hrt * { 
 
    font-weight: 100; 
 
} 
 
*/

<div class ="hrt"> 
 
    This is div text 
 
    <p>This is paragraph text</p> 
 
</div>