☰

내부에 특정 텍스트가 있는 경우 CSS로 HTML 요소를 숨기시겠습니까?

tag-icon • tag-icon html css stylish
내부에 특정 텍스트가 있는 경우 CSS로 HTML 요소를 숨기시겠습니까?

각 요소에 대한 자체 클래스가 없으면 웹사이트를 조작하기 어렵습니다.

예를 들어, 아래 코드에서 두 번째 요소를 어떻게 숨길 수 있나요?

<p>
    <p>te</p>
    <p>st</p>
    <p>ing</p>
</p>

텍스트는 요소 내부에서 절대 변경되지 않습니다.

저는 Firefox와 함께 Stylish를 사용하여 웹사이트의 CSS/HTML을 편집하고 있습니다.

답변1

CSS와 HTML만 사용하여 논리(태그의 값을 식별하고 특정 작업을 수행)를 사용하는 방법을 모르겠습니다. 이를 위해서는 Javascript 등이 필요합니다. 그러나 텍스트 블록에서 두 번째 p 요소를 숨기려면 n번째 유형 CSS 선택기를 사용하면 됩니다.

p 태그를 div로 감싸고 div에 클래스를 지정하세요.

<div class="HideChild">
    <p>te</p>
    <p>st</p>
    <p>ing</p>
</div>


그런 다음 CSS에서 다음과 같은 선택기를 만듭니다.

.HideChild p:nth-of-type(2)
{
display: none;
}


div에 p 태그를 래핑하고 클래스를 사용하면 페이지의 여러 텍스트 블록에 이 기능을 재사용할 수 있습니다. 숨길 줄을 변경하려면 nth-child 뒤의 숫자를 변경하고, 페이지에서 줄을 display: none로 바꿔야 하는 간격을 표시하려면 visibility: hidden.

관련 정보