[CSS] 선택자

🗂️ 선택자 종류

1. 기본 선택자
2. 그룹 선택자
3. 특성 선택자
4. 결합 선택자
5. 의사 클래스
6. 의사 요소

🍕 기본선택자

전체 선택자

• 모든 요소를 선택
• *(애스터리스크)는 문서 내의 모든 요소

*{
    color: red;
}

문서 내 모든 요소의 글자 색을 빨간색으로 지정

태그 선택자

• 주어진 이름을 가진 요소를 선택
• 주어진 이름을 가진 요소가 다수일 경우 해당 요소 전부 선택

p{
    color: red;
}

문서 내 모든 p 태그 요소의 글자 색을 빨간색으로 지정

클래스 선택자

• 주어진 class 속성값을 가진 요소 선택
• 주어진 class 속성을 가진 요소가 다수일 경우 해당 요소 전부 선택

.test{
    color: red;
}

문서 내 class 가 test 인 모든 요소의 글자 색을 빨간 색으로 지정

아이디 선택자

• 주어진 id 속성값을 가진 요소 선택
• id 는 고유한 식별자 역할을 하는 전역 속성

#test{
    color: red;
}

문서 내 id 가 test 인 요소의 글자 색을 빨간 색으로 지정

📚 그룹 선택자

• 다양한 유형의 요소를 한꺼번에 선택하고자 할 때 사용
• , 를 이용해 선택자를 그룹화

div, p, span{
    color: red;
}

문서 내 모든 div, p, span태그 요소의 글자 색을 빨간색으로 지정

🎃 특성 선택자

• 특성 선택자(속성 선택자)는 주어진 속성의 존재 여부나 그 값에 따라 요소를 선택

[class]{
    background-color: red;
}

클래스 속성을 가지고 있는 요소 선택

[class='test']{
    background-color: red;
}

클래스가 test인 요소를 선택

• 다양한 기호를 가지고 검색할 수 있음

[class *= 'test']{color: red;}  /* 클래스 값에 test가 포함되는 요소 선택 */
[class ^= 'test']{color: red;}  /* 클래스 값이 test로 시작하는 요소 선택 */
[class $= 'test']{color: red;}  /* 클래스 값에 test로 끝나는 요소 선택 */

그 외 : https://developer.mozilla.org/ko/docs/Web/CSS/Attribute_selectors

🪄 결합 선택자

• 두 개 이상의 선택자를 결합시켜 결합된 조건을 만족하는 요소를 선택

자손 결합자

• 두 개의 선택자 중에 첫 번째 선택자 요소의 자손을 선택

div p{color: red;}
div > p{color: red;}

1. div 요소 안에 위치하는 모든 p 요소 선택
2. div 요소 안의 바로 아래에 위치하는 모든 p 요소 선택
   • 만일 div 요소 바로 아래 p 가 아닐 경우는 선택 안됨

형제 결합자

• 두 개의 선택자 중 첫 번째 선택자 요소의 형제를 선택할 수 있음

h1 ~ p{color: red;}
h1 + p{color: red;}

1. h1 요소의 뒤에 오는 형제 중 모든 p 요소 선택
2. h1 요소의 바로 뒤에 오는 형제 p 요소 선택

추가 링크: https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Selectors#%EA%B2%B0%ED%95%A9%EC%9E%90

🔮 의사 클래스(가상 클래스)

• 선택자에 추가하는 키워드
• 요소가 어떤 특정한 상태가 되었을 때 요소를 선택하겠다는 의미

h1:hover{
    color: red;
}

h1 요소에 마우스 커서가 올라오면(hover) 글자를 빨간색으로

의사 클래스 추가 링크: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

✨ 의사 요소

• 선택자에 추가하는 키워드
• 선택한 요소의 특정 부분에 대한 스타일을 정의할 수 있음

li::first-letter{
    font-size: 20px;
}

li 요소의 첫 번째 글자만 크기를 20px 로

• 의사 클래스 : 특정 상태
• 의사 요소 : 특정 파트

의사 요소 추가 링크: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

🧨 선택자가 겹치는 경우

• 기본적으로 나중에 작성된 스타일이 적용
• 선택자가 다르지만 요소가 겹치는 경우, 선택자 우선순위에 의해 적용될 스타일이 결정
• 선택자 우선 순위 아아디 선택자 > 클래스 선택자 > 태그 선택자