[CSS] 선택자

✔️ 선택자

<!-- 전체 선택자 -->
* { color: red; font-size: 5em; }

<!-- id 선택자 -->
#id { color: red; font-size: 5em; }

<!-- 속성 선택자 -->
[title="css"] { color: red; font-size: 5em; }

<!-- HTML 요소 선택자 -->
h1 { color: red; font-size: 5em; }

<!-- 그룹 선택자 -->
h1, h2, h3, ... { color: red; font-size: 5em; }

<!-- class 선택자 -->
.special { color: red; font-size: 5em; }

<!-- descendant selector : li 요소 안에 em들 선택 -->
li em { color: red; font-size: 5em; }

<!-- child selector : li 요소의 직계 자식 em만 선택 -->
li > em { color: red; font-size: 5em; }

<!-- adjacent sibling selector : ul 뒤에 오는 첫번째 p만 선택 -->
ul + p { color: red; font-size: 5em; }

<!-- general sibling selector : ul 뒤에 오는 p들 선택 -->
ul ~ p { color: red; font-size: 5em; }

<!-- pseudo-calss selector -->
div:hover { color: red; font-size: 5em; }

 

📌 선택자의 우선순위

선택자는 '구체적' 일수록 우선순위가 높다!

1. !important 명령어
2. 인라인 스타일 : style=""
3. ID 선택자 : #selector
4. CLASS 선택자 : .selector
5. 속성 기반 선택자 : a[]
6. 태그 선택자 : a
7. 전체 선택자 : *

See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.

 

📌 BEM(Block Element Modifier)으로 선택자 지정하기

.BLOCK__ELEMENT--MODIFIER { /* ... */ }

• 간결해진 선택자 - 코드량 감소
• 명확한 선택자 - 중복 문제 해소
• 높은 가독성, 이해하기 쉬운 구조

See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.

 

✔️ 속성 선택자

/* 속성을 기준으로 선택 */
a[title] {
  color: purple;
}

/* 속성 값을 기준으로 선택 */
a[href="https://example.org"] {
  color: green;
}

/* 특정 속성이 있는 요소 선택 */
input[disabled]+label {
  color: lightgray;
}

/* 속성값이 특정 텍스트를 포함하는 요소 */
span[class*="item"] {
  text-decoration: underline;
}

/* 속성값이 특정 텍스트로 시작하는 요소 */
span[class^="fruit"] {
  color: tomato;

/* 속성값이 특정 텍스트로 끝나는 요소 */
span[class$="-1"] {
  font-weight: bold;
}

/* 속성값이 특정 텍스트를 포함하는 요소 */
div[class~="first"] {
  color: red;
}

/* 속성값이 특정 텍스트로 시작하는 요소 */
div[title|="faker"] {
  color: blue;
}

 

✔️ 가상 클래스(pseudo-class) 선택자

📌 동적 가상 클래스

• :hover : 사용자의 마우스 커서가 링크 위에 올라가 있는 상태를 선택합니다.
• :active : 사용자가 마우스로 링크를 클릭하고 있는 상태를 선택합니다.
• :link : 사용자가 아직 한 번도 이 링크를 통해서 연결된 페이지를 방문하지 않은 상태를 선택합니다. (기본값)
• :visited : 사용자가 한 번이라도 이 링크를 통해서 연결된 페이지를 방문한 상태를 선택합니다.
• :focus : 포커스를 가지고 있는 input 요소를 모두 선택합니다.

See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.

 

 

 

📌 상태 가상 클래스

• :checked : 체크된 상태의 input 요소를 모두 선택합니다.
• :enabled : 사용할 수 있는 input 요소를 모두 선택합니다.
• :disabled : 사용할 수 없는 input 요소를 모두 선택합니다.
• :required : 필수 입력인 input 요소를 모두 선택합니다.
• :valid : 값이 유효한 input 요소를 모두 선택합니다.

See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.

 

 

 

📌 구조 가상 클래스

• :first-of-type : 모든 자식 요소 중에서 맨 처음으로 등장하는 특정 타입의 요소를 모두 선택합니다.
• :last-of-type : 모든 자식 요소 중에서 맨 마지막으로 등장하는 특정 타입의 요소를 모두 선택합니다.
• :nhn-of-type(n) : 모든 자식 요소 중에서 n번째로 등장하는 특정 타입의 요소를 모두 선택합니다.
• :only-of-type : 자식 요소로 특정 타입의 요소 단 하나만을 가지는 요소의 자식 요소를 모두 선택합니다.
• :only-child : 자식 요소로 단 하나만 가지는 요소의 자식 요소를 모두 선택합니다.
• :root : 문서의 root 요소를 선택합니다.

See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.

 

 

 

📌 기타 가상 클래스

• :not : 모든 선택자와 함께 사용할 수 있으며 해당 선택자를 반대로 적용하여 선택합니다.

 

✔️ 가상 요소(pseudo-element) 선택자

• ::first-letter : 텍스트의 첫 글자만을 선택합니다. (block 타입의 요소에만 사용할 수 있습니다.)
• ::first-line : 텍스트의 첫 라인만을 선택합니다. (block 타입의 요소에만 사용할 수 있습니다.)
• ::before : 특정 요소의 내용 부분 바로 앞에 다른 요소를 삽입할 때 사용합니다. (content로 내용을 꼭 지정해야합니다.)
• ::after : 특정 요소의 내용 부분 바로 뒤에 다른 요소를 삽입할 때 사용합니다. (content로 내용을 꼭 지정해야합니다.)
• ::selection : 해당 요소에서 사용자가 선택한 부분만을 선택할 때 사용합니다.
• ::placeholder : 해당 요소에 기본적으로 스타일을 적용시킬 때 사용합니다.

See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.

 

 

 

📄 참고

https://www.yalco.kr/

http://www.tcpschool.com/

https://developer.mozilla.org/