36. CSS - 다양한 선택자들

1. 다양한 선택자들

1. 속성 선택자

1. 태그에 작성한 속성을 이용해서 태그를 선택할 수 있는 선택자
2. 선택자[속성명]: 해당 속성을 가지고 있는 태그를 선택해서 사용한다.
3. 선택자[속성명=속성값]: 해당 속성을 가지면서 속성값도 동일한 태그만 선택해서 사용한다.

2. 가상클래스

1. 가상클래스는 사용자가 동작에 반응하는 클래스
2. 가상클래스를 이용하면 사용자가 동하는 것에 따라 스타일을 변경할 수 있다.
3. 대표적인 가상클래스의 종류
   • 선택자:link : 사용자가 방문하지 않은 링크에 대한 스타일 적용
   • 선택자:visited : 사용자가 방문한 링크에 대한 스타일 적용
   • 선택자:hover : 사용자가 해당 태그에 마우스 커서를 올렸을 때에 대한 스타일 적용
   • 선택자:active : 사용자가 해당 태그를 활성화 했을 때에 대한 스타일 적용
   • 선택자:focus : 해당 태그에 포커스가 갔을 때에 대한 스타일 적용
   • 선택자:checked : 라디오 버튼이나 체크박스가 체크된 상태에 대한 스타일 적용
   • 선택자:nth-child(n) : n번째에 있는 자식태그에 대한 스타일 적용
     • n에 올 수 있는 값들
       • odd: 홀수
       • 2n+1: 홀수
       • even: 짝수
       • 2n: 짝수
       • 숫자: 해당 숫자번째의 자식 선택
   • 선택자:first-child, 선택자:last-child : 자식 태그들 중에 첫 번째 자식태그나 마지막 자식 태그를 선택
   • 선택자:not(아이디, 클래스, 가상클래스, ...) : 특정 아이디, 클래스, 가상클래스가 아닌 태그들만 선택

3. 상속을 위한 선택자

1. 자식 선택자
   • 해당 태그의 자식태그를 선택할 때 사용하는 선택자.
   • 사용법은 >를 이용한다. 부모선택자 > 자식선택자 {속성}
2. 하위(자손) 선택자
   • 해당 태그의 하위태그에 있는 특정 태그 모두 선택하는 선택자.
   • 자식 선택자와 차이점은 자식 선택자는 자식 레벨에 있는 태그들만 선택하지만 하위(자손) 선택자는 모든 레벨에 있는 자손들도 다 선택
   • 부모 선택자 하위(자손) 선택자 {속성}
3. 인접 형제 선택자
   • 같은 레벨에 존재하는 태그들을 형제태그라고 부른다.
   • 인접 형제 선택자는 형제 태그중 해당 태그 바로 뒤에 생성된 형제 태그를 선택한다.
   • 선택자1 + 선택자2 { 속성 }
4. 형제 선택자
   • 형제 선택자는 인접 형제 선택자와는 다르게 해당 태그 뒤에 선언된 모든 형제태그를 선택하는 선택자
   • 선택자1 ~ 선택자2 { 속성 }

4. 가상 요소

1. 가상 요소는 실제로 태그나 내용이 존재하지 않지만 css를 이용해서 내용을 추가하거나 스타일을 부여받는 요소.
2. 선택자:before : 특정 태그 앞에 내용을 추가하거나 스타일을 적용함.
3. 선택자:after : 특정 태그 뒤에 내용을 추가하거나 스타일을 적용함.