텍스트 노드를위한 CSS 선택기가 있습니까?

173

IE에서 분명히하고 싶지 않은 것은 다음과 같습니다.

p:not(.list):last-child + :text {
  margin-bottom: 10px;
}

텍스트 노드에 여백이 생깁니다. (그것도 가능합니까?) CSS로 텍스트 노드를 어떻게 얻습니까?

css css-selectors

— 루디
소스

::first-line이름에서 알 수 있듯이을 사용하여 근사 할 수 있지만 첫 번째 텍스트 줄에만 적용됩니다. (또한 일부 속성 만 설정할 수 있다고 생각합니다)

— Mark Garcia

답변:

114

텍스트 노드에는 여백이나 다른 스타일을 적용 할 수 없으므로 스타일을 적용해야하는 모든 요소가 요소에 있어야합니다. 요소 내부의 일부 텍스트 스타일을 다르게하려면 예를 들어 span또는로 감싸십시오 div.

— 야곱
소스

그럼에도 불구하고 필자는 텍스트 노드에서 :: fore 및 :: after를 필사적으로 누락했습니다.

— shabunc

I'm nevertheless desperately missing ::before and ::after on text nodes.과연. 그들은 형식을 취하지 않을 수도 있지만 확실히 content.

— Synetech

텍스트 노드를 타겟팅하는 방법을 묻는 것은 매우 합리적인 질문입니다. OP가 구체적으로 "여백"이라고 말했지만 텍스트 노드에 적용 할 수 있고 부모 노드가 아닌 텍스트 노드에 적용 할 수있는 다른 스타일입니다. 예를 들어, 텍스트 아래에 테두리를 원한다고 가정하십시오. 해당 테두리 아래쪽을 텍스트 노드에 적용하면 원하는 결과를 얻을 수 있지만 부모 div라고 말하면 전체 div 주위에 아래쪽 테두리가 만들어집니다. 불행히도 CSS는 적어도 현재로서는 HTML 요소를 추가하여 텍스트 노드를 대상으로 할 수 없습니다.

— VKK

글꼴을 설정할 수 있습니다. 물론 작동하지만 다른 스타일은 적용되지 않습니다.

— Hamid Bahmanabady

당신은 지금 stackoverflow.com/questions/10645552/에

— fearis

CSS를 사용하여 텍스트 노드를 대상으로 지정할 수 없습니다. 난 너와 함께있어; 나는 당신이 할 수 있었으면 좋겠다.

<span> @Jacob suggests와 같은 텍스트 노드를 감싸지 않으면 대신 다음 과 같이 주변 요소 padding를 제공 할 수 있습니다 margin.

HTML

<p id="theParagraph">The text node!</p>

CSS

p#theParagraph
{
    border: 1px solid red;
    padding-bottom: 10px;
}

— 리차드 JP 르 구엔
소스