CSS 선택기 소개 

CSS 선택기는 스타일을 지정할 내용을 실제로 선택하는 CSS 규칙 세트의 일부입니다. 

각각의 간단한 설명과 함께 사용 가능한 다양한 종류의 선택기를 살펴 보겠습니다.

https://www.sitepoint.com/css-selectors/ 

유니버셜 셀렉터 

범용 선택기는 와일드 카드 문자처럼 작동하여 페이지의 모든 요소를 ​​선택합니다. 

모든 HTML 페이지는 HTML 태그 내에 배치 된 컨텐츠를 기반으로 합니다. 각 태그 세트는 페이지의 요소를 나타냅니다. 범용 선택기를 사용하는 다음 CSS 예제를 살펴보십시오.

* {
   color: green;
   font-size: 20px;
   line-height: 25px;
}

중괄호 안에 있는 세 줄의 코드 (컬러, 글꼴 크기 및 줄 높이)는 HTML 페이지의 모든 요소에 적용됩니다. 

여기에서 보듯이 범용 선택기는 별표를 사용하여 선언됩니다. 범용 선택기를 다른 선택기와 함께 사용할 수도 있습니다.

요소 유형 선택기 

간단히 "유형 선택기"라고도 하는 이 선택기는 동일한 이름을 가진 하나 이상의 HTML 요소와 일치해야 합니다. 

따라서 nav 선택기는 모든 HTML nav 요소와 일치하고 <ul> 선택기는 모든 HTML 비 순차 목록 또는 <ul> 요소와 일치합니다.

다음 예제에서는 요소 유형 선택기를 사용하여 모든 <ul> 요소를 일치 시킵니다.

ul {
   list-style: none;
   border: solid 1px #ccc;
}

이를 문맥에 맞추기 위해 위의 CSS를 적용 할 HTML 섹션이 있습니다.

<ul>
  <li>Fish</li>
  <li>Apples</li>
  <li>Cheese</li>
</ul>

<div class="example">
  <p>Example paragraph text.</p>
</div>

<ul>
  <li>Water</li>
  <li>Juice</li>
  <li>Maple Syrup</li>
</ul>

페이지의 이 부분을 구성하는 세 가지 주요 요소가 있습니다 : 두 개의 <ul> 요소와 <div>. CSS는 <div>가 아닌 두 개의 <ul> 요소에만 적용됩니다. <ul> 대신 <div>를 사용하도록 요소 유형 선택기를 변경 한 경우 스타일은 두 개의 <ul> 요소가 아닌 <div>에 적용됩니다.

또한 스타일은 <ul> 또는 <div> 요소 내의 요소에는 적용되지 않습니다. 즉, 일부 스타일은 이러한 내부 요소에 의해 상속 될 수 있습니다.

ID Selector 

ID 선택기는 문자열 앞에 해시 또는 파운드 기호 (#)를 사용하여 선언됩니다. 문자열은 개발자가 정의합니다. 이 선택기는 선택기의 값과 동일하지만 해시 기호를 빼고 ID 속성이 있는 HTML 요소와 일치합니다.

예를 들면 다음과 같습니다.

#container {
   width: 960px;
   margin: 0 auto;
}

이 CSS는 ID 선택기를 사용하여 다음과 같은 HTML 요소와 일치 시킵니다.

<div id="container"></div>

이 경우 <div> 요소라는 사실은 중요하지 않으며 모든 종류의 HTML 요소 일 수 있습니다. 값이 container 인 ID 속성이 있는 한 스타일이 적용됩니다.

웹 페이지의 ID 요소는 고유해야 합니다. 즉, ID가 컨테이너 인 특정 페이지에는 단일 요소만 있어야 합니다. ID 선택기 규칙 세트에 사용 된 스타일을 페이지 당 한 번만 사용할 수 있기 때문에 ID 선택기를 매우 융통성 있게 만들 수 없습니다.

동일한 ID를 가진 페이지에 둘 이상의 요소가 있는 경우 스타일은 계속 적용되지만 해당 페이지의 HTML은 기술적 인 관점에서 유효하지 않으므로 이 작업을 수행하지 않는 것이 좋습니다.

비 유연성 문제 외에도 ID 선택기는 매우 높은 특이도의 문제를 가지고 있습니다.

Class Selector 

클래스 선택기는 모든 CSS 선택기 중 가장 유용합니다. 하나 이상의 문자 문자열 앞에 점이 표시됩니다. ID 선택기의 경우와 마찬가지로 이 문자열은 개발자가 정의합니다. 클래스 선택기는 또한 클래스 속성이 클래스와 동일한 값에서 점을 뺀 값으로 설정된 페이지의 모든 요소와 일치합니다.

다음 규칙 세트를 수행하십시오.

.box {
   padding: 20px;
   margin: 10px;
   width: 240px;
}

이러한 스타일은 다음 HTML 요소에 적용됩니다.

<div class="box"></div>

값이 box 인 클래스 속성이 있는 다른 HTML 요소에도 동일한 스타일이 적용됩니다. 클래스 속성이 동일한 단일 페이지에 여러 요소를 사용하면 스타일을 재사용하고 불필요한 반복을 피할 수 있으므로 유리합니다. 이외에도 클래스 선택기는 고유성이 매우 낮으며 나중에 더 자세히 설명합니다.

클래스 선택자가 중요한 동맹국 인 또 다른 이유는 HTML을 통해 여러 클래스를 단일 요소에 추가 할 수 있기 때문입니다. 공백을 사용하여 HTML 클래스 속성에서 클래스를 분리하면 됩니다. 예를 들면 다음과 같습니다.

<div class=”box box-more box-extended”></div>

Descendant Combinator 

하위 항목 선택기 또는 보다 정확하게 하위 항목 결합기를 사용하면 두 개 이상의 선택기를 결합 할 수 있으므로 선택 방법을 보다 구체적으로 지정할 수 있습니다. 예를 들면 다음과 같습니다.

#container .box {
   float: left;
   padding-bottom: 15px;
}

이 선언 블록은 컨테이너의 ID를 가진 요소 안에 상자 클래스가 있는 모든 요소에 적용됩니다. .box 요소가 바로 하위 요소 일 필요는 없습니다. .box를 감싸는 다른 요소가 있을 수 있으며 스타일은 계속 적용됩니다.

다음 HTML을 보십시오.

<div id="container">
  <div class="box"></div>

  <div class="box-2"></div>
</div>

<div class="box"></div>

이전 예제의 CSS를이 HTML 섹션에 적용하면 해당 스타일에 영향을 받는 유일한 요소는 상자 클래스가 있는 첫 번째 <div> 요소입니다. 클래스 2의 클래스가 있는 <div> 요소는 스타일의 영향을 받지 않습니다. 마찬가지로 상자 클래스가 있는 두 번째 <div> 요소는 컨테이너의 ID를 가진 요소 안에 있지 않으므로 영향을 받지 않습니다.

CSS에서 하위 조합을 사용할 때는 주의해야 합니다. 이러한 종류의 선택기는 CSS를 좀 더 읽기 쉽게 만들면서 스타일을 특정 컨텍스트로 불필요하게 제한 할 수 있습니다.이 경우 스타일은 # 컨테이너 내부의 상자로 제한되어 코드를 유연하게 만들 수 없습니다.

Child Combinator 

자식 콤비 네이터를 사용하는 셀렉터는 하위 자식 콤비 네이터를 사용하는 셀렉터와 비슷하지만 바로 하위 요소 만 대상으로 합니다.

#container > .box {
   float: left;
   padding-bottom: 15px;
}

이것은 하위 컴비네이터 예제와 동일한 코드이지만 공백 문자 대신 큰 기호 (또는 직각 괄호)를 사용합니다.

이 예에서 선택기는 상자 클래스가 있고 #container 요소의 직계 자식 인 모든 요소와 일치합니다. 즉, 하위 컴비 네이터와 달리 상자를 감싸는 다른 요소는 있을 수 없습니다. 직접 하위 요소 여야 합니다.

HTML 예제는 다음과 같습니다.

<div id="container">
  <div class="box"></div>

  <div>
    <div class="box"></div>
  </div>
</div>

이 예에서 이전 코드 예의 CSS는 상자 클래스가 있는 첫 번째 <div> 요소에만 적용됩니다. 보시다시피, 상자 클래스를 가진 두 번째 <div> 요소는 다른 <div> 요소 안에 있습니다. 결과적으로 스타일에 상자 클래스가 있어도 해당 요소에는 스타일이 적용되지 않습니다.

이 결합기를 사용하는 선택기는 다소 제한적일 수 있지만 중첩 목록의 스타일을 지정할 때 편리합니다.

General Sibling Combinator 

일반 형제 결합기를 사용하는 선택기는 형제 관계를 기반으로 요소를 일치 시킵니다. 즉, 선택된 요소는 HTML에서 서로 옆에 있습니다.

h2 ~ p {
   margin-bottom: 20px;
}

이 유형의 선택기는 물결표 문자 (~)를 사용하여 선언됩니다. 이 예에서 모든 단락 요소 (<p>)는 <h2> 요소의 형제 인 경우에만 지정된 규칙에 따라 스타일이 지정됩니다. <h2>와 <p> 사이에 다른 요소가 있을 수 있으며 스타일은 여전히 ​​적용됩니다.

위에서 CSS를 다음 HTML에 적용 해 보겠습니다.

<h2>Title</h2>
<p>Paragraph example.</p>
<p>Paragraph example.</p>
<p>Paragraph example.</p>
<div class="box">
  <p>Paragraph example.</p>
</div>

이 예제에서 스타일은 처음 세 단락 요소에만 적용됩니다. 마지막 단락 요소는 <div> 요소 안에 있기 때문에 <h2> 요소의 형제가 아닙니다.

Adjacent Sibling Combinator 

인접한 형제 결합기를 사용하는 선택기는 더하기 기호 (+)를 사용하며 일반 형제 선택기와 거의 동일합니다. 차이점은 대상 요소가 일반 형제 자매가 아니라 즉각적인 형제 자매 여야 한다는 것입니다. 이에 대한 CSS 코드가 어떻게 보이는지 봅시다 :

p + p {
   text-indent: 1.5em;
   margin-bottom: 0;
}

이 예제는 지정된 스타일을 다른 단락 요소 바로 뒤에 오는 단락 요소에만 적용합니다. 즉, 페이지의 첫 번째 단락 요소는 이러한 스타일을 받지 않습니다. 또한 두 단락 사이에 다른 요소가 나타나는 경우 두 단락의 두 번째 단락에는 스타일이 적용되지 않습니다.

따라서 이 선택기를 다음 HTML에 적용하면

<h2>Title</h2>
<p>Paragraph example.</p>
<p>Paragraph example.</p>
<p>Paragraph example.</p>

<div class="box">
  <p>Paragraph example.</p>
  <p>Paragraph example.</p>
</div>

… 스타일은이 HTML 섹션의 두 번째, 세 번째 및 다섯 번째 단락에만 적용됩니다.

Attribute Selector 

속성 선택기는 HTML 속성의 존재 및 / 또는 값을 기반으로 요소를 대상으로 하며 대괄호를 사용하여 선언됩니다.

input[type="text"] {
   background-color: #444;
   width: 200px;
}

하위 콤비 네이터와 함께 사용하려는 경우를 제외하고 여는 대괄호 앞에 공백이 없어야 합니다. 위의 CSS는 다음 요소와 일치합니다.

<input type="text">

그러나 이것은 일치하지 않습니다.

<input type="submit">

속성 선택기는 다음과 같이 값 없이 속성 자체 만 사용하여 선언 할 수도 있습니다.

input[type] {
   background-color: #444;
   width: 200px;
}

이는 값에 관계없이 모든 입력 요소를 유형의 속성과 일치 시킵니다.

대괄호 외부에 아무것도 지정하지 않고 속성 선택기를 사용할 수도 있습니다 (따라서 요소와 상관없이 속성 만 기반으로 타겟팅). 또한 값을 사용할 때 따옴표 (단일 또는 이중)를 포함하거나 포함하지 않는 옵션이 있습니다.

Pseudo-class 

의사 클래스는 콜론 문자를 사용하여 요소가 있을 수 있는 의사 상태 (예 : 호버링 상태 또는 활성화 상태)를 식별합니다. 일반적인 예를 살펴 보겠습니다.

a:hover {
   color: red;
}

이 경우 셀렉터의 의사 클래스 부분은 : hover 부분입니다. 여기 이 의사 클래스를 모든 앵커 요소 (요소)에 연결했습니다. 즉, 사용자가 요소 위로 마우스를 가져 가면 해당 요소의 색상 속성이 빨간색으로 변경됩니다. 이 유형의 의사 클래스는 동적 의사 클래스입니다. 이는 사용자 상호 작용 (이 경우 마우스가 대상 요소 위로 이동)에 대한 응답으로 만 발생하기 때문입니다.

이러한 유형의 선택기는 요소 만 선택하는 것이 아니라는 점을 인식해야 합니다. 그들은 특정 상태에 있는 요소를 선택합니다. 이 예의 목적 상 상태는 "호버"상태입니다.

Pseudo-element 

마지막으로 CSS에는 의사 요소라고 하는 선택기가 있으며 적절하게 사용하면 매우 유용 할 수 있습니다. 유일한 선택은 이 선택기가 우리가 고려한 다른 예제와는 상당히 다르다는 것입니다. 문맥에서 의사 요소를 봅시다 :

.container:before {
   content: "";
   display: block;
   width: 50px;
   height: 50px;
   background-color: #141414;
}

이 예에서는 한 가지 종류의 의사 요소 인 : before pseudo-element를 사용합니다. 이름에서 알 수 있듯이 이 선택기는 가상 요소를 대상 요소 내부의 페이지에 내용 전에 삽입합니다.