[HTML] 선택자
1. 여러 개를 한꺼번에 선택하기
- 그룹 선택자
div, h1, p{
div, h1, p 태그 모두에 같은 스타일을 지정한다!
}
2. 연결 선택자
- 하위 선택자 : 지정한 요소의 하위 요소 선택하기
div div{
div태그의 하위 태그로 div가 있을 경우 해당 하위태그 선택!
}
- 자식 선택자 : 특정 상위 태그와 특정 하위 태그 지정하여 선택
=> 바로 한 칸 밑의 하위태그 중에서만!
div > p{
div의 하위태그 p 태그만 콕 집어서 선택!
}
- 인접 형제(sibling) 선택자 : 가장 가까운 형제 요소 선택
div + p{
div 태그 바로 뒤에 있는 p 태그 선택!
}
- 형제 선택자 : 모든 형제 요소 선택
div ~ p{
div 태그와 동일 선상에 있는 모든 p 선택!
}
3. 속성(태그의 attribute) 선택자
- 일반 속성 선택자 : 지정한 속성이 존재하기만 하면 무조건 선택
a[href]{
a 태그 중에 href 속성이 존재하는 모든 태그 선택!
}
- 속성값 선택자 : 지정한 속성이 지정한 값을 지녀야만 선택
a[href="study"]{
a 태그 중에 href 속성이 study인 태그만 선택!
}
- 값 포함 선택자 : 일부 값을 포함하고만 있어도 선택
a[href*="study"]{
a 태그 중에 href 속성값에 study가 포함된 태그만 선택!
}
- 값 시작 선택자 : 해당 값으로 시작하는 속성값만 선택
a[href^="study"]{
a 태그 중에 href 속성값이 study로 시작되는 태그만 선택!
}
- 값 끝 선택자 : 해당 값으로 끝나는 속성값만 선택
a[href$="study"]{
a 태그 중에 href 속성값이 study로 끝나는 태그만 선택!
}
