CSS 선택기

우리 중 많은 사람들이 다른 Selector가 있다는 것을 알지 못한 채 Classes/Id/Elements를 사용하므로 CSS selector에 대한 개요와 그것이 우리에게 어떻게 도움이 되는지 살펴보겠습니다.

CSS 선택자는 무엇입니까?

CSS 선택기를 사용하면 특정 HTML 요소에 CSS 스타일을 적용할 수 있습니다. 두 개의 div 요소가 있지만 그 중 하나만 스타일 지정하려는 경우와 같이 동일한 유형의 HTML 요소를 구별할 수 있습니다.

CSS 선택기의 유형은 무엇입니까?

엄청난 수준의 유연성을 제공하기 위해 CSS에서 제공하는 많은 선택기가 있으므로 자세히 살펴보겠습니다.

기본 선택자

범용 선택기
범용 선택기는 모든 요소에 빨간색을 적용하려는 경우와 같이 모든 요소를 ​​제어할 수 있습니다. 많은 개발자는 이 트릭을 사용하여 여백과 패딩을 0으로 만듭니다.


ID 선택기
id 선택자는 해시 기호 앞에 붙이며 id가 있는 특정 요소를 선택할 수 있는 기능을 제공합니다.

There should be only one element with a given ID in a document

클래스 선택자
클래스 선택자는 접두사로 시작하며 이 클래스 이름을 가진 모든 요소를 ​​선택할 수 있는 기능을 제공합니다. 이것은 프로젝트에서 사용할 재사용 가능한 클래스를 생성할 수 있는 유연성을 제공하기 때문에 가장 일반적인 선택자입니다.


요소 선택기
페이지의 모든 요소를 ​​대상으로 지정하려는 경우 요소 유형에 따라 간단하게 요소 유형을 입력할 수 있습니다.


속성 선택기
내 생각에 이 선택기는 속성에서 특정 요소를 선택할 수 있는 유연성을 제공하기 때문에 정말 유용합니다.
2개의 입력이 있는 경우 그 중 하나는 텍스트이고 두 번째는 암호 입력인 경우 이 선택기로만 텍스트를 선택할 수 있습니다.

시작 문자 또는 종료 문자에 따라 특정 요소를 선택하거나 문자열을 포함하고 여기에 이러한 선택자 목록을 포함할 수 있습니다.

조합기 선택기

연결자는 선택자 간의 관계를 설명하는 것입니다.

후손 연결자

이 선택자는 가장 일반적인 선택자 중 하나이며 우리의 경우 특정 컨테이너 내부의 p가 div(부모)인 경우 모든(자식) 선택을 원할 때 유용합니다.

a b{
 // code
}

If your selector looks like a b c d, you're doing it wrong. Always ask yourself if it's absolutely necessary to apply all of that weight

인접한 형제 결합자
이 선택기는 이전 요소 바로 앞에 있는 첫 번째 요소만 선택합니다. 여기서 p는 선택된 요소입니다.


일반 형제 결합기
이 일반 형제 연결자는 인접 형제 연결자와 유사하지만 덜 엄격합니다. 첫 번째 요소가 아니더라도 h1 다음의 모든 p를 선택하기 때문입니다.


하위 조합기
이 Selector는 컨테이너 내부의 첫 번째 수준만 찾고 스타일을 적용하므로 div 내부에 범위가 있는 경우 스타일은 첫 번째 수준이기 때문에 첫 번째 범위에만 적용됩니다.

의사 선택자

pseudo는 호버링, 방문 또는 확인 등과 같은 상태 정보를 기반으로 요소를 선택할 수 있도록 합니다. 기호를 사용하여 참조하고 여기에는 Pseudo Selector 목록이 있습니다.

결론

CSS 선택자에 대한 요약을 설명했으면 좋겠고 질문이나 실수가 있으면 더 개선할 수 있는 제안을 할 수 있고 질문이 있으면 저에게 메시지를 보내주세요.

자원

https://www.w3schools.com/cssref/css_selectors.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
https://www.w3schools.com/css/css_selectors.asp