CSS 선택기(1부)

선택기는 (스타일) 속성을 첨부하기 위해 HTML 문서에서 요소를 선택하는 데 사용됩니다.

가장 많이 사용되는 CSS 선택자는 by class 및 by id 이지만 요소 집합에 스타일을 추가하는 데 쉽고 공정하게 사용할 수 있는 선택자가 많이 있습니다.

A. 조합기

B. 속성 선택기

C. 의사 선택자

D. 의사 클래스

이 기사에서는 class 및 id 이외의 다양한 선택자에 대해 이야기하고 Combinator 및 Attribute Selector를 다룰 것입니다.

모든 속성 선택기에 대해 아래 HTML 스니펫을 사용합니다.

<div>
    <p>First Paragraph</p>
    <p>Second Paragraph</p>
    <span>Third Span</span>
    <p>Fourth Paragraph</p>
    <ul>
        <li>First Item</li>
        <li>Second Item</li>
    </ul>
</div>

<p>Fifth Paragraph</p>
<p>Sixth Paragraph</p>

A. 조합기

하위 선택기

범용 선택기

인접한 형제 선택기

일반 형제자매 선택기

하위 선택기

1️⃣ 후손 선택자

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

div p {
    background-color: #fdc7d5;
}

산출:

2️⃣ 범용 선택기

범용 선택기로 모든 요소를 ​​선택할 수 있습니다.

div * {
  background-color: #fdc7d5;
}

div *는 모든 div 요소 내의 요소를 선택합니다.

산출:

3️⃣ 인접 형제 선택기

다른 요소 바로 뒤에 오는 요소를 선택합니다.

div + p {
  background-color: #fdc7d5;
}

이렇게 하면 div 태그 바로 뒤에 오는 p 요소가 선택됩니다. 다른 요소를 따르는 요소를 형제라고 합니다.

산출:

4️⃣ 일반 형제 선택자

뒤에 오는 요소의 모든 형제를 선택할 수 있습니다. 이것은 Adjacent Selector(div + p)와 비슷하지만 하나가 아닌 다음 요소를 모두 가져옵니다.

div ~ p {
  background-color: #fdc7d5;
}

산출:

5️⃣ 자식 선택기

요소의 직계 자식을 선택합니다. 다른 요소의 직계 하위인 요소를 선택할 수 있습니다.

div > p {
  background-color: #fdc7d5;
}

div > p는 직계 자식p인 모든 div를 선택합니다.

산출:

B. 속성 선택기

속성 선택자를 끝에 추가하여 다른 선택자와 결합합니다.

<input type="text" placeholder="Enter Input" />
<input type="text" placeholder="Disabled Input" disabled />

input[disabled] 속성이 disabled인 모든 입력 요소를 선택합니다.

input[disabled] {
    background: #82ffdc;
}

산출:

속성 선택기 유형:

속성 값 선택기

속성이 선택기로 시작함

속성이 선택자로 끝남

속성 와일드카드 선택기

속성 선택기에 대해 아래 HTML 템플릿을 사용합니다.

<p class="line-first-para">First Paragraph</p>
<p class="second-para">Second Paragraph</p>
<p class="line-last">Third Paragraph</p>

1️⃣ 속성 값 선택자

input[type="checkbox"] 모든 확인란 입력 요소를 선택합니다.

input[type="checkbox"] {
  font-size: 18px;
  margin-top: 3rem;
}

2️⃣ 셀렉터로 시작하는 속성

[class^="line"]는 class="line"및 class="line" 또는 class="line-first-para" 인 요소를 선택합니다.

[class^="line"] {
    background: yellow;
}

산출:

3️⃣ 속성은 선택자로 끝납니다.

[class$="para"]는 para로 끝나는 모든 단락을 선택합니다.

[class$="para"] {
    background: skyblue;
}

산출:

4️⃣ 속성 와일드카드 선택기

[class*="-"] class="second-para"또는 class="third-para"와 같이 클래스에 "-"가 있는 모든 요소를 ​​선택합니다.

[class*="-"] {
    background: orangered;
    color: white;
}

산출:

참고 🧐

Combinators MDN

Attribute Selectors MDN

🌟


👩🏻‍💻 Suprabha.me


🌟