CSS 셀렉터가 뭐야? CSS 선택기는 어떻게 작동합니까?

반응형

"선택기는 HTML 또는 XML 문서에서 요소를 선택하여 (스타일) 특성을 첨부하는 데 사용됩니다."

가장 많이 사용되는 CSS 선택기는 클래스별이지만 id별로도 요소 집합에 스타일을 추가하는 데 쉽고 공정하게 사용할 수 있는 선택기가 많습니다.

각 셀렉터에 대한 간략한 설명과 함께 사용 가능한 모든 종류의 셀렉터를 살펴보겠습니다.

셀렉터

div p 하위 선택기

 

다른 요소 내부의 요소를 선택합니다.
div 내부의 모든 p 요소를 선택합니다.

div p {
    bacground-color: #fff;
    display: flex;
    text-aling: center;
}

#user.admin / ul.class Decentant Combinator

임의의 선택기와 하위 선택기를 결합할 수 있습니다.

user.admin은 id="user"인 모든 요소를 선택하고 class="admin"도 포함합니다.

 

ul.list는 class="list"가 있는 모든 ul 요소를 선택합니다.

#user.admin, ul.list {
    border: none;
    text-align: left;
    width: 100%;

}

** 범용 선택기

범용 선택기를 사용하여 모든 요소를 선택할 수 있습니다.
div * 모든 div 요소 내부의 요소를 선택합니다.

ul.something * 모든 ul 클래스="something" 요소 내의 모든 요소를 선택합니다.

 

div * {
    color: #F8386D;
    line-height: 26px;
}

div + p 인접 형제 선택기

다른 요소를 직접 따르는 요소를 선택합니다.

div 태그 바로 뒤에 오는 p 요소를 선택합니다. 다른 요소 뒤에 오는 요소를 형제라고 합니다.

span + .intro는 span 다음에 오는 class="intro"인 모든 요소를 선택합니다.

 

span + .intro {
    color: rgb(182,216,218);
    background: #D37C71;
}

div ~ p 일반 형제 선택기

요소 뒤에 오는 요소의 모든 형제 항목을 선택할 수 있습니다. 이것은 인접 선택기(div + p)와 비슷하지만, 이 선택기에서는 1개 대신 다음 요소를 모두 얻습니다.

div ~ p {
    display: flex;
    align-items: center;
}

div > h1 자식 선택기

 

요소의 직계 하위를 선택합니다.

다른 요소의 직계 하위 요소인 요소를 선택할 수 있습니다.
div > h1은 직계 하위 div인 모든 h1을 선택합니다.

div > h1 {
    font-size: 16px;
    width: 100%;
}

:첫째 자식 /:마지막 자식 첫째, 마지막 자식 유사 선택기

이러한 선택기를 사용하여 다른 요소 내부의 첫 번째 자식/마지막 자식 요소를 선택할 수 있습니다.

 

ul li:first child는 div에 있는 모든 첫째 자식 p 요소를 선택합니다.

ul li:last-child는 ul 내부의 마지막 li 요소를 선택합니다.

ul li:first-child {
    padding: 5em;
    margin: 0 1px 0 -4px;
}

ul li:last-child {
    font-size: 16px;
    text-decoration: none;
}

:Only-child Only Child 유사 선택기

 

다른 요소 내부의 유일한 요소를 선택합니다.

ul li:only-child는 ul에 있는 유일한 li 요소를 선택합니다.

ul li:only-child {
    color: #1264a3;
    padding: 0 12px 0 15px;
}

:n번째 자식(A) N번째 자식 유사 선택기

다른 요소에서 n번째(예: 첫째, 셋째, 12번째 등) 하위 요소를 선택합니다.

 

div p:nth-child(8)는 div 요소의 8번째 자식인 모든 p 요소를 선택합니다.

div p:nth-child(8) {
    color: #FA6887;
    height: 26px;
    width: 100%;
}

:n번째 마지막 자식(A) N번째 마지막 자식 선택기

부모의 맨 아래에서 하위 항목을 선택합니다.

ul li:nth-last-child(2)는 모든 둘째-last 하위 요소를 선택합니다.

 

ul li:nth-last-child(2) {
    display: flex;
    font-size: 16px;
    justify-content: center;
}

:최초 유형 선택기 최초 유형 선택기

다른 요소 내에서 해당 유형의 첫 번째 요소를 선택합니다.

span:first-of-type은 요소의 첫 번째 범위를 선택합니다.

span:first-of-type {
    display: block;
    font-size: 18px;
    margin-top: 3rem;
}

 

:n번째 유형(1) N번째 유형 선택기

이것은 그 요소의 짝수 또는 홀수 인스턴스인 다른 요소에서의 유형과 순서에 따라 해당 요소의 짝수 또는 홀수 인스턴스를 선택합니다.

.n번째:n번째 유형(홀수)은 클래스의 모든 홀수 인스턴스를 선택합니다="n번째".

div:n번째 유형(2)은 div의 두 번째 인스턴스를 선택합니다.

.example:nth-of-type(odd) {
    line-height: 1.5;
    padding: 10px 0;
    text-align: center;
}