선택기 란 무엇입니까?

CSS 선택기는 웹 페이지의 요소와 일치하는 패턴입니다. 해당 선택기와 관련된 스타일 규칙이 선택기 패턴과 일치하는 요소에 적용됩니다.

선택기는 CSS의 가장 중요한 측면 중 하나입니다. 웹 페이지의 특정 요소를 다양한 방식으로 타겟팅하여 스타일을 지정할 수 있습니다.

CSS에서 여러 유형의 선택기를 사용할 수 있습니다. 선택기를 자세히 살펴 보겠습니다.

유니버셜 셀렉터

별표 ( *) 로 표시된 범용 선택기 는 페이지의 모든 단일 요소와 일치합니다.

요소에 다른 조건이있는 경우 범용 선택기를 생략 할 수 있습니다. 이 선택기는 종종 빠른 테스트 목적으로 요소에서 기본 여백과 패딩을 제거하는 데 사용됩니다.

기본적으로 어떻게 작동하는지 이해하기 위해 다음 예제를 시도해 봅시다.

* {
    margin: 0;
    padding: 0;
}

요소 유형 선택기

요소 유형 선택기는 문서에서 요소의 모든 인스턴스를 해당 요소 유형 이름과 일치시킵니다. 실제로 어떻게 작동하는지보기위한 예를 들어 보자.

p {
    color: blue;
}

ID 선택기

id 선택기는 단일 또는 고유 요소에 대한 스타일 규칙을 정의하는 데 사용됩니다 .

id 선택기는 해시 부호 ( #) 로 정의되고 그 뒤에 id 값이옵니다.

#test-text-name {
    color: red;
}

클래스 선택기

클래스 선택기를 사용하여 class속성 이있는 HTML 요소를 선택할 수 있습니다 . 해당 클래스를 가진 모든 요소는 정의 된 규칙에 따라 형식이 지정됩니다.

클래스 선택기는 마침표 ( .)와 클래스 값 바로 뒤에 정의됩니다 .

.color-blue {
    color: blue;
}

위의 스타일 규칙은 class속성이로 설정된 문서의 모든 요소를 ​​텍스트로 파란색으로 렌더링합니다 color-blue. 좀 더 구체적으로 만들 수 있습니다. 예를 들면 다음과 같습니다.

p.color-blue {
    color: blue;
}

선택기 내부의 스타일 규칙 은 속성이로 설정되어 있고 다른 단락에는 영향을 미치지 않는 요소 p.color-blue만 파란색으로 텍스트를 렌더링합니다 .

classcolor-blue

후손 선택기

예를 들어, 모든 앵커 요소를 대상으로하지 않고 순서가없는 목록에 포함 된 앵커 만 대상으로하려는 경우 다른 요소의 하위 요소 인 요소를 선택해야 할 때이 선택기를 사용할 수 있습니다. 그것이 어떻게 작동하는지 봅시다 :

ul.menu li a {
    text-decoration: none;
}
h1 em {
    color: green;
}

선택기 내부의 스타일 규칙 은 클래스가 있는 요소 내부에 포함 된 요소 ul.menu li a에만 적용되며 문서 내의 다른 링크에는 영향을 미치지 않습니다.

.menu 마찬가지로 h1 em선택기 내부의 스타일 규칙은 요소 내에 포함되어 있고 다른 요소 에는 영향을주지 않는 요소 에만 적용됩니다 .

아동 선별기

하위 선택기는 일부 요소의 직계 하위 요소 만 선택하는 데 사용됩니다.

자식 선택기는보다 큼 기호 ( >)로 구분 된 두 개 이상의 선택기로 구성됩니다 . 예를 들어이 선택기를 사용하면 둘 이상의 레벨이있는 ​​중첩 된 목록 내에서 첫 번째 레벨의 목록 요소를 선택할 수 있습니다. 작동 방식을 이해하기 위해 예제를 확인하십시오.

ul > li {
    list-style: square;
}
ul > li ol {
    list-style: none;
}

선택기 내부의 스타일 규칙 은 요소 의 직접적인 자식 요소이며 다른 목록 요소에는 영향을 미치지 않는 요소 ul > li에만 적용됩니다 .

인접 형제 선택기

인접한 형제 선택기는 형제 요소 (즉, 동일한 레벨의 요소)를 선택하는 데 사용할 수 있습니다. 이 선택기의 구문은 E1 + E2입니다. 여기서 E2는 선택기의 대상입니다.

h1 + p다음 예제 의 선택기 

는 및 요소 가 모두 문서 트리에서 동일한 부모를 공유 하고 요소로 앞에있는 경우에만 요소 를 선택합니다.  즉, 각 제목 바로 다음에 나오는 단락에만 관련 스타일 규칙이 적용됩니다. 이 선택기가 실제로 어떻게 작동하는지 봅시다 :

h1 + p {
    color: blue;
    font-size: 18px;
}
ul.task + p {
    color: #f0f;
    text-indent: 30px;
}

일반 형제 선택기

일반 형제 선택기는 인접한 형제 선택기 (E1 + E2)와 유사하지만 덜 엄격합니다. 일반 형제 선택기는 물결표 ( ) 문자로 구분 된 두 개의 간단한 선택기로 구성됩니다 . E1 ~ E2와 같이 쓸 수 있습니다. 여기서 E2는 선택기의 대상입니다.

h1 ∼ p아래 예제 의 선택기 는 요소 앞에 오는 모든 요소를 선택합니다.

여기서 모든 요소는 문서 트리에서 동일한 부모를 공유합니다.

h1 ∼ p {
    color: blue;
    font-size: 18px;
}
ul.task ∼ p {
    color: #f0f;
    text-indent: 30px;
}

속성 선택기 , 유사 클래스 , 유사 요소 와 같은보다 정교한 선택기가 있습니다 . 다음 장에서 이러한 선택기에 대해 자세히 설명합니다.

선택기 그룹화

스타일 시트의 여러 선택기가 동일한 스타일 규칙 선언을 공유하는 경우가 종종 있습니다. 스타일 시트에서 코드를 최소화하기 위해 쉼표로 구분 된 목록으로 그룹화 할 수 있습니다. 또한 동일한 스타일 규칙을 반복해서 반복하지 못하게합니다. 한 번 보자:

h1, h2, h3 {
    font-weight: normal;
}
h1 {
    font-size: 36px;
}
h2 {
    font-size: 28px;
}
h3 {
    font-size: 22px;
}