[CSS] 선택자

선택자란

• 특정 html 요소를 선택하고자 할 때 사용하는 기능
• 해당 요소를 선택해서 원하는 스타일과 기능을 적용시킬 수 있음

---

기본 선택자

• 태그, 클래스, 아이디값 기준으로 HTML 요소를 선택해와서 내가 원하는 CSS를 부여

1. 전체 선택자 ( * )

* {
     스타일 속성 : 값;
     스타일 속성 : 값;
}

2. 태그 선택자 (태그명)

• 해당 문서 내 같은 태그 모두를 선택, 태그 여러개 하고 싶으면 콤마를 붙이면 됨

태그명, 태그명2{
     스타일속성: 값;
}

3. 아이디 선택자 (#아이디명)

• 모든 태그 내 공통적으로 쓸 수 있는 속성 : id, class
  • id : 문서 내 고유한 값으로 하나만을 작성 (중복x)
  • class : 중복된 값 작성 가능, 여러 개 작성 가능
• 해당 이 문서 내 특정 html 요소 하나만을 선택하고자 할 때 사용
• 단 해당 그 요소 id 속성을 이용해서 고유한 아이디값을 부여해야함

4. 클래스 선택자 (.클래스명)

• 해당 문서 내 내가 원하는 여러개의 요소를 선택하고자 할 때 사용
• 하나의 HTML 태그에 여러 개 클래스 추가하고자 하면 클래스 두 개 쓰고 사이에 띄어쓰기

/* 아이디 선택자 */
#아이디명{
     스타일 속성 :값;
}

/* 클래스 선택자 */
.클래스1 클래스2{
     스타일 속성 :값;
}

---

기타선택자

1. 속성 선택자

• 스타일을 부여하고자 하는 요소 내에 작성되어 있는 속성을 이용해서 선택하는 방법
• 선택자 뒤에 [ ]을 이용해서 속성과 속성값을 제시해서 선택
  • 선택자 [속성=속성값] : 속성값과 정확하게 일치하는 요소
  • 선택자 [속성~=속성값] : 속성값이 '포함'되어있는 요소 (단어로써)
  • 선택자 [속성*=속성값] : 속성갚이 '포함' 되어 있는 요소 (문장)
  • 선택자 [속성|=속성값] : 속성값으로 '시작'되는 요소 ( - 기준으로 앞에 한 단어 전체)
  • 선택자 [속성^=속성값] : 속성값으로 '시작'되는 요소 (단어 안에 포함된 문자)
  • 선택자 [속성$=속성값] : 속성값으로 '끝' 나는 요소

/* div중 class 속성값에 i가 "포함"되어있는 요소*/
div[class*=i]{
    background : yellow;
    color:red;
}

2. 자손 선택자 / 후손 선택자

• 자손 : 바로 하위인 요소들
• 후손 : 하위 요소 전부
• 자손선택자 ( > ) : a 요소의 자손들 중에서 b 요소들만 선택

a>b {
    스타일속성 : 값;
}

• 후손선택자 : (  ) : a 요소의 후손들 중에서 b 요소들만 선택

a b{
    스타일속성 : 값;
}

3. 동위레벨 선택자

• 동위관계(같은 레벨) 에 있는 뒤에 위치한 특정 요소를 선택할 때 사용
• a+b : a 요소 뒤에 있는 b요소 "하나만" 선택,
• a~b : a 요소 뒤에 있는 모든 b요소 선택

#test2~ul{
    background-color: pink;
}

4. 반응 선택자

• 사용자의 움직임에 따라 선택이 되거나 안되는 선택자
• active : 해당 요소에 클릭이 되었을 경우 스타일 부여

선택자:active{
    스타일속성 : 값;
}

• hover : 해당 요소에 마우스가 올라가는 순간 스타일 부여

선택자:hover{
    스타일속성 : 값;
}

• cursor:pointer - 해당 영역에 커서가 올라가면 커서가 손 모양으로 바뀜

5. 상태 선택자

• 요소의 상태에 따라서 선택되는 선택자
• checked : 체크된 상태의 요소

선택자:checked{
    스타일속성:값;
}

• focus : 초점(focus) 이 맞춰진 상태의 input 요소 선택

선택자:focus{
    스타일속성:값;
}

/* 타입이 체크박스인 input 태그가 체크 될때 글씨 크기 변경  */
input[type=checkbox]:checked+label{
    font-size: 20px;
}

---

선택자 우선순위

• css는 위에서부터 아래로 순차적으로 적용됨
• 동일한 요소를 다양한 선택자로 css가 부여된경우 우선순위에 따라 적용됨
  • 외부스타일 < 내부스타일 < 인라인스타일
  • 태그선택자 < 클래스선택자 < 아이디선택자 < 인라인스타일 < !important (속성 뒤에 붙임, 권장하지 않음)
• 겹치지 않는 스타일의 경우 선택자 우선순위에 상관없이 반영됨