[HTML/CSS] 📚 선택자

📋 기억하고 싶은 내용

📌 주요 선택자 - Type, Class, ID

• HTML 문서 전체에 일괄적으로 스타일을 적용하고 싶을 때 Type Selector를 사용한다.
• Type Selector들은 제일 상단에 모아 작성하는 것이 일반적이다.

📌 속성 선택자

/* 1. [attr] */
a[target] {
	color: red;
}

/* 2. [attr=value] */
a[href="https://example.org"] {
	color: indigo;
}

/* 3. [attr^=value] */
a[href^="http://"] {
	color: green;
}

/* 4. [attr$=value] */
a[href$=".com"] {
	font-style: italic;
}

/* 5. [attr*=value] */
a[href*="example"] {
	color: sienna;
}

• [attr=value] 속성 선택자는 보통 input 요소의 타입 별로 스타일을 적용하고 싶을 때 사용한다.
• Caret Sign(^)은 해당 값으로 시작하는 모든 요소를 선택하고, Dollar Sign($)은 해당 값으로 끝나는 모든 요소를 선택한다.
• Asterisk Sign(*)은 해당 값을 가지고 있는 모든 요소를 선택한다.

📌 가상 클래스 선택자

/* 1. :first-child */
li:first-child {
	color: green;
}

/* 2. :last-child */
span:last-child {
	color: tomato;
}

/* 3. :nth-child() */
li:nth-child(3) {
	color: hotpink;
}

/* 4. :first-of-type */
p:first-of-type {
	color: red;
}

/* 5. :last-of-type */
p:last-of-type {
	color: blue;
}

/* 6. :nth-of-type() */
p:nth-of-type(even) {
	color: blue;
}

/* 7. :not() */
input:not(.pw) {
	background-color: indianred;
}

/* 8. :link */
a:link {
	color: tomato;
}

/* 9. :visited */
a:visited {
	color: yellow;
}

/* 10. :hover */
input[type=button]:hover {
	background-color: teal;
    color: white;
}

/* 11. :active */
input[type=button]:active {
	background-color: red;
    color: white;
}

/* 12. :focus */
input[type=text]:focus {
	background-color: blue;
    color: white;
}

/* 13. :enabled */
input[type=text]:enabled {
	background-color: skyblue;
}

/* 14. :disabled */
input[type=text]:disabled {
	background-color: silver;
}

/* 15. :checked */
input[type=radio]:checked {
	outline: 3px solid red;
}

• :first-child 가상 클래스 선택자는 형제 요소들 중에서 첫 번째 자식 요소를 가리킨다.
  • 만약 형제 요소들의 첫 번째 요소가 다른 요소라면 스타일이 적용되지 않는 문제가 발생한다.
  • 이를 해결하기 위해 나온 것이 :first-of-type 가상 클래스 선택자다.
• :nth-child() 가상 클래스 선택자의 괄호 안에는 숫자 뿐만 아니라 odd와 even 키워드도 넣을 수 있다.
  • odd는 홀수를 뜻하고, 2n-1과 동일하게 작동한다.
  • even은 짝수를 뜩하고, 2n과 동일하게 작동한다.
• :first-of-type 가상 클래스 선택자는 해당 요소들 중에서 첫 번째 요소를 가리킨다.
  • 동일한 클래스 선택자를 가진 요소들 중에서 다른 타입의 요소를 가졌을 경우 여러 개를 가리킬 수 있다.
• :not() 가상 클래스 선택자는 괄호 안에 작성된 요소를 제외한 나머지 모든 요소에 스타일을 적용한다.
• :active 가상 클래스 선택자는 mousedown 이벤트가 발생했을 때 적용되는 스타일을 지정할 수 있다.
• 링크를 적절히 디자인하려면 LVHA 순서에 따라 작성하는 것이 중요하다.

📌 가상 요소 선택자

/* 1. ::before */
.movie::before {
	content: '⭐';
	color: indianred;
}

/* 2. ::after */
.movie::after {
	content: '⭐';
	color: indianred;
}

/* 3. ::first-letter */
.lorem::first-letter {
	color: red;
    font-size: 30px;
}

/* 4. ::first-line */
.lorem::first-line {
	color: red;
}

/* 5. ::seletion */
.lorem::selection {
	background-color: blue;
}

• 가상 요소 선택자는 보통 실제로 존재하지 않는 요소 혹은 범위를 만들어서 스타일을 적용할 때 사용한다.
• 가상 요소 선택자로 만든 가상 요소는 선택도 되지 않, 복사도 되지 않는다.
• 단지 꾸미기 위한 용도로 사용되며, 보통 뱃지를 만들거나 메뉴 사이에 구분선을 만들 때 사용한다.
• ::before 가상 요소 선택자를 사용한 요소에 ::first-letter 가상 요소 선택자를 사용하면 ::before 가상 요소 선택자가 가리키는 요소의 첫 번째 텍스트에 스타일이 적용된다.
• ::first-line 가상 요소 선택자는 뷰포트 가로 너비와 상관없이 무조건 첫 줄만 스타일이 적용된다.
• ::selection 가상 요소 선택자는 선택 영역에 대한 스타일을 적용할 때 사용한다.

📌 선택자 결합

/* 1. 하위 선택자 */
#list li:last-of-type {
	color: red;
}

/* 2. 자식 선택자 */
#list > li:last-of-type {
	color: red;
}

/* 3. 일반 형제 선택자 */
code ~ p {
	color: red;
}

/* 4. 인접 형제 선택자 */
code + p {
	color: red;
}

/* 5. 그룹화 */
div, p {
	color: red;
}

• 스페이싱을 사용해 탐색하는 범위를 좁힐 수 있다.
• Right Angle Braket(>)을 사용하면 바로 아래의 자식 요소들만 탐색할 수 있다.
• 일반 형제 선택자 사용 시 주의해야 할 점은 Tilde(~) 뒤에는 항상 Tilde(~) 앞에 작성한 요소의 뒤에 작성한 형제 요소가 와야 한다.
• 인접 형제 선택자는 인접한 요소만 선택할 수 있다.

📌 범용 선택자

* {
	color: red;
}

div > * {
	color: red;
}

• 범용 선택자는 주의해서 사용하고, 가능한 CSS 파일의 최상단에 작성하는 것이 좋다.
• 범용 선택자는 단독으로 사용해 HTML 문서 전체의 스타일을 지정할 수도 있고, 다른 선택자와 결합해 사용할 수도 있다.

📌 상속 제어하기

index.html

<div class="parent1">
  parent1
  <div class="child1">child1</div>
  <div class="child2">child2</div>
</div>

<div class="parent2">
  parent2
  <div class="child1">child1</div>
  <div class="child2">child2</div>
</div>

main.css

div {
	border: 1px solid silver;
    margin: 2px
}

.child1 {
	color: red;
}

.parent1, .parent2 {
	color: blue;
}

.parent2 .child1 {
	all: unset;
}

• all: initial 값을 사용하면 부모 요소로부터 상속받은 모든 스타일을 기본값으로 변경할 수 있다.
• all: inherit 값을 사용하면 부모 요소로부터 상속받은 모든 스타일을 적용한다.
• all: unset 값을 사용하면 부모로부터 상속받을 값이 있으면 inherit으로 작동하고, 부모로부터 상속받을 값이 없으면 initial로 작동한다.
  • 여러 CSS 파일을 import 했을 때 해당 요소에 어떤 스타일이 적용됬는지 알 수 없는 경우가 있다.
  • 이때 all: unset을 적용함으로써 해당 요소를 초기화를 시키고, 해당 요소의 부모가 가지고 있는 스타일만 상속받아 재정의할 수 있다.

📌 우선 순위

1. 선언된 곳
2. 명시도 (적용 범위가 적을수록 명시도가 높은 것!)
3. 코드 위치

🌝 수강한 소감 & 떠오르는 생각

• 상속을 제어할 수 있는 initial, inherit, unset 속성들이 어떻게 동작되는지 조금 헷갈린다. 현업에서 간혹 사용된다고 하니 복습을 통해 완벽하게 이해하도록 하자!

🔗 참고 래퍼런스

• CSS 선택자 - MDN
• :active - MDN
• unset - MDN