CSS 선택기는 대상 요소, 요소 숨기기 및 요소 기능이 하나 이상의 HTML 요소를 식별할 때까지 기다립니다. CSS 선택기의 두 가지 주요 유형은 ID 또는 클래스로 선택하는 것입니다. 아래와 같이 id 속성이 포함된 HTML 요소에는 id가 있습니다.
<span id="myidentifier">Example Text</span>
이를 선택하려면 다음과 같은 CSS 선택기를 만듭니다. #myidentifier
HTML 요소에 클래스가 있는 경우 이 예에 표시된 대로 클래스 속성을 갖게 됩니다.
<div> <span class="myclass">Example Text One</span> <span class="myclass">Example Text Two</span> <span class="myclass">Example Text Three</span> </div>
이를 선택하려면 다음과 같은 CSS 선택기를 만듭니다. .myclass
클래스가 있는 특정 요소를 선택하려는 경우 myclass
이 경우에는 표준 CSS 선택기를 사용하여 그렇게 할 수 있습니다. n번째 자식(2) 선택기는 다음과 같습니다: .myclass:nth-child(2)
두 번째 myclass 범위를 선택합니다. 그러나 이는 상위 div 요소 아래에 다른 요소가 없기 때문에 이 경우에만 작동합니다. 예를 들어 ap 요소가 있으면 n번째 하위 인덱스가 변경됩니다.
선택해야 하는 HTML 요소에 페이지 내에서 고유한 ID나 클래스가 없는 경우가 있습니다. 이러한 HTML 요소를 선택할 때 더 복잡한 CSS 선택기가 필요합니다.
<div class="Header"> <a href="https://www.example.com/"> <div>...</div> </a> <div class="SearchBar">...</div> <div class="TagLine">...</div> </div>
예를 들어 위의 예에서는 링크 내의 DIV 요소를 선택하려고 합니다. 이를 위해서는 고유한 DIV에서 아래로 작동하는 CSS 선택기를 지정해야 합니다. Header
클래스입니다.
div.Header a div
CSS 선택기는 웹 개발의 표준 기능입니다. 이 기사에서는 다음에 대한 좋은 개요를 제공합니다. CSS 선택자를 사용하는 방법.
CSS 선택기에서 여러 HTML 요소가 반환되고 대상 요소를 사용 중이거나 요소 기능을 기다리는 경우 첫 번째로 일치하는 요소만 사용됩니다. 그러나 요소 숨기기 기능을 사용하는 경우 일치하는 모든 HTML 요소가 숨겨집니다.
ID나 클래스가 다른 여러 요소를 숨기려면 각 CSS 선택기를 쉼표로 구분하면 됩니다. 예를 들어 위의 예제 클래스와 ID를 숨기려면 다음을 사용합니다. #myidentifier,.myclass