CSS 선택자

CSS 선택자는 HTML 문서에서 요소와 일치하는 패턴입니다. 관련 스타일 규칙은 선택자 패턴과 일치하는 요소에 적용됩니다.

선택자는 무엇인가요

선택자는 웹 페이지에서 요소를 선택하여 스타일을 설정하는 CSS에서 가장 중요한 측면 중 하나입니다. 선택자를 여러 가지 방식으로 정의할 수 있습니다.

일반 선택자

일반 선택자(로 사용됩니다*별 또는 별로 표시된 것은 페이지에서 각 단일 요소와 일치합니다. 목표 요소에 다른 조건이 있으면 일반 선택자를 제외할 수 있습니다. 이 선택자는 일반적으로 요소에서 기본 마진과 패딩을 제거하여 빠른 테스트를 위해 사용됩니다.

*　{
　　　　margin: 0;
　　　　padding: 0;
　　}

*선택자 내의 스타일 규칙은 문서의 각 요소에 적용됩니다.

요소 타입 선택자

요소 타입 선택자는 문서 트리의 각 요소를 해당 요소 타입 이름과 일치시킵니다.

p {
　　　　color: blue;
　　}

p선택자 내의 스타일 규칙은<p>문서의 각 요소에 대해 사용되며, 이는 요소가 문서 트리에서 어디에 있는지에 관계없이 색상을 설정합니다.

ID 선택자

ID 선택자는단일한또는고유한요소에 스타일 규칙을 정의합니다.

ID 선택자의 정의는 정점(#)#），ID 값이 그 뒤에 오는 것입니다.

#error {
　　　　color: red;}

이 스타일 규칙은id속성이 설정된 요소의 텍스트를 빨간색으로 표시합니다error

클래스 선택자

클래스 선택자는class속성을 가진 모든 HTML 요소. 해당 클래스를 가진 모든 요소는 정의된 규칙에 따라 포맷됩니다.

한 개의 점(.).）에 바로 이어지는 클래스 값 정의 클래스 선택자입니다.

.blue {
　　　　color: blue;
　　　　　　}

위의 스타일 규칙은class속성이 설정된 문서의 각 요소의 텍스트를 파란색으로 표시합니다blue로 더 구체화할 수 있습니다. 예를 들어:

p.blue {
　　　　color: blue;
　　　　}

선택자의 스타일 규칙p.blue제한된<p>설정된class속성이 설정된 요소는 파란색으로 표시됩니다blue만이 영향을 받습니다.

자손 선택자

요소가 다른 요소의 자식으로 선택되어야 할 때, 이러한 선택자를 사용할 수 있습니다. 예를 들어, 비디오 목록에서 포함된 위치만 선택하고 싶을 때, 모든 위치 요소를 선택하지 않고 싶을 때.

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

선택자 내의 스타일 규칙ul.menu li a적용됩니다<a>class를 포함한목록안에 있는 그것, 즉 앵커 요소.menu에 적용되며, 문서 내의 다른 링크에는 영향을 미치지 않습니다. 마찬가지로,h1 em선택자 내의 스타일 규칙은<em>heading에 포함된 요소<h1>

자식 선택자

자식 선택자는 특정 요소의 직접 자식 요소로 선택할 수 있는 요소에만 사용됩니다. 자식 선택자는 두 개 이상의 선택자로 구성되며, 두 선택자 사이에 더 큰 than 기호(즉>）로 구분합니다. 예를 들어, 여러 단계의 내嵌된 목록에서 첫 번째 수준의 목록 요소를 선택할 수 있습니다.

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

선택자 내의 스타일 규칙ul > li적용됩니다<li>로<ul>요소의 직접 자식 요소와 그 외의 목록 요소에 영향을 미치지 않는 요소

동일 자매 선택자

동일 자매 선택자는 동일 자매 요소를 선택할 수 있습니다. 이 선택자의 문법은 다음과 같습니다: E1 + E2에서 E2는 선택자의 대상입니다.

h1 + p아래 예제의 선택자<p>단지<h1>및<p>요소가 문서 트리에서 같은 부모를 공유하며<h1>이 직접 이어지는<p>요소 이전의 경우에만 요소를 선택합니다. 이는 각각의<h1>제목 이후의 패러그래프는 관련 스타일 규칙을 가집니다.

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

일반적인 자매 선택자

일반적인 동일 자매 선택자는 동일 자매 선택자(E1 + E2）유사하지만 더 덜 엄격합니다. 일반적인 동일 자매 선택자는 두 간단한 선택자로 구성되며, 이들은 위아래 문자(~）문자로 구분됩니다. 이렇게 쓸 수 있습니다: E1~ E2에서 E2는 선택자의 대상입니다.

아래 예제의 선택자h1 ~ p그 선택자를 선택합니다<p>요소 이전의<h1>모든 요소는 문서 트리에서 같은 부모 요소를 공유합니다.

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

또한, 속성 선택자, 패seudo-class, 패seudo-element과 같은 더 많은 선택자가 있습니다. 이들 선택자에 대해 다음 장에서 설명할 것입니다.

그룹 선택자

스타일 시트에서 여러 선택자는 일반적으로 같은 스타일 규칙을 공유합니다. 이들을 쉼표로 구분된 목록으로 그룹화할 수 있습니다. 이는 스타일 시트에서 코드를 최대한 줄일 수 있으며, 같은 스타일 규칙을 반복적으로 반복하는 것을 방지할 수 있습니다.

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

위의 예제에서 볼 수 있듯이, 같은 스타일 규칙font-weight: normal;는 선택과 공유됩니다h1,h2및h3따라서, 쉼표로 구분된 목록으로 나눌 수 있습니다. 예를 들어:

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