선택자(Selector)란?
- 선택해주는 요소, 즉 특정 요소들을 선택하여 스타일을 적용
선택자의 종류
- 선택자를 하나만 사용하는 경우
1. 전체 선택자 (Universal Selector)
- * 를 이용하여 HTML페이지 내부의 모든 태그를 선택
/* css */
* {
margin: 0; text-decoration: none;
}문서안의 모든 요소를 읽어내려야 하기 때문에 페이지 로딩 속도가 느려질 수 있다. margin이나 padding값을 초기화하는 등 기본값을 설정할 때 사용한다.
2. 태그 선택자 (Type Selector)
- HTML의 요소를 선택 ( h1, p, table 등 )
/* css */
p {
color: skyblue;
}
/* html */
<p> 태그 선택자 실습 </p>
3. 클래스 선택자 (Class Selector)
- [ .클래스이름 ]을 사용하여 클래스가 클래스이름과 같은 태그들에 대하여 스타일을 적용한다.
/* css */
.test1 { font-size: 15px; color: red; }
div.test2 { font-size: 30px; color: blue; } /* test2는 div태그에서만 적용가능 */
/* html */
<p class="test1"> 클래스 선택자 실습1 </p>
<h1 class="test2"> 클래스 선택자 실습2 </h1> /* 적용불가 */
<div class="test2"> 클래스 선택자 실습3 </div>선택하려는 속성값 앞에 마침표를 추가해서 작성.
마침표 앞에 태그를 붙여주면 그 특정 태그에 한하지만, 모든 태그에 적용하고 싶다면 붙여주지 말자.
4. 아이디 선택자 (ID Selector)
- [ #ID이름 ]을 사용하여 ID가 ID이름과 같은 태그들에 대하여 스타일을 적용한다.
/* css */
#test1 { font-size: 15px; color: red; }
div#test2 { font-size: 30px; color: blue; } /* test2는 div태그에서만 적용가능 */
/* html */
<p id="test1"> 클래스 선택자 실습1 </p>
<h1 id="test2"> 클래스 선택자 실습2 </h1> /* 적용불가 */
<div id="test2"> 클래스 선택자 실습3 </div>class 선택자와 매우 유사하지만, 마침표 대신 #를 사용하고 class속성 대신 id속성을 사용한다.
* 클래스 선택자와 아이디 선택자의 차이
- 클래스 선택자 : 글자색이나 굵기 등 다른 곳에도 적용할 수 있는 스타일 지정 (두 개 이상의 속성값을 가질 수 있음)
- ID 선택자 : 웹 문서 안에 요소의 배치 방법을 지정
- 우선순위 : 아이디 선택자 > 클래스 선택자
=> 하나의 페이지 내에서 여러 번 반복도리 필요가 있는 스타일은 클래스 선택자를 사용하고, 단 한번 유일하게 적용될 스타일은 ID 선택자를 사용하자.
5. 속성 선택자(Attribute Selector)
- 특정 속성을 갖고 있거나 특정 속성이 특정 값을 갖고 있는 요소를 선택한다.
1) [attributename]
h1[title] /* title 속성을 가진 h1 요소 선택 */
2) [attributename="value"]
h1[title="Hello"]
<h1 title="Hello">test1</h1>
<h1 title="Hello World">test2</h1> /* 선택되지 않음 */
3) [attributename~="value"] : 속성의 값이 value가 포함된 요소 선택 (단어 기준)
h1[title="Hello"]
<h1 title="Hello">test1</h1>
<h1 title="Hello World">test2</h1> /* 선택됨 (Hello 단어가 포함) */
<h1 title="HelloWorld">test3</h1> /* 선택되지 않음 */
4) [attributename|="value"] : 속성의 값이 value이거나 value-로 시작하는 요소 선택
h1[title="Hello"]
<h1 title="Hello">test1</h1>
<h1 title="Hello-World">test2</h1> /* 선택됨 */
<h1 title="Hello World">test3</h1> /* 선택되지 않음 */
5) [attributename^="value"] : 속성의 값이 value로 시작하는 요소 선택 (문자열 기준)
h1[title="Hello"]
<h1 title="Hello-World">test1</h1> /* 선택됨 */
<h1 title="Hello World">test2</h1> /* 선택됨 */
6) [attributename$="value"] : 속성의 값이 value로 끝나는 요소 선택 (문자열 기준)
h1[title="World"]
<h1 title="Hello-World">test1</h1> /* 선택됨 */
<h1 title="Hello World">test2</h1> /* 선택됨 */
7) [attributename*="value"] : 속성의 값이 value를 포함한 요소를 선택 (문자열 기준)
h1[title*="Hello"]
<h1 title="Hello World">test1</h1> /* 선택됨 */
<h1 title="HelloWorld">test2</h1> /* 선택됨 */
<h1 title="Hi Hello-World">test2</h1> /* 선택됨 */
- 선택자를 여러 개 사용하는 경우
1. 하위 선택자(Descendant Combinator)
- [기준 요소] [자손 요소]
- 특정 요소의 하위에 있는 자손 요소를 선택합니다.
/* css */
section ul { border: 1px dotted black; }
/* html-1 */
<section>
<ul> ... </ul>
</section>
/* html-2 */
<section>
<p>
<ul> ... </ul>
</p>
</section>하위 단계에 해당하는 지정된 요소를 모두 선택한다.
2. 자식 선택자(Child Selector)
- [기준 요소] > [자식 요소]
- 특정 요소의 한단계 아래 있는 자식 요소만을 선택합니다.
/* css */
section > ul { border: 1px dotted black; }
/* html-1 */
<section>
<ul> ... </ul>
</section>
/* html-2 */
<section>
<p>
<ul> ... </ul>
</p>
</section>이 경우 html-2의 ul는 해당하지 않는다.
두 가지 선택자를 비교하면 다음 그림과 같다.
- 하위선택자 - 자손요소 : 자식을 포괄하는 의미로서 모든 하위 요소를 의미
- 자식선택자 - 자식요소 : 바로 아래 자식 요소에만 적용
3. 인접 형제 선택자
- 선택자 사이를 +를 사용하여 나타내며 앞 요소 바로 뒷 요소를 선택한다.
h1 + ul {
color: red;
}
4. 일반 형제 선택자
- 선택자 사이에 ~를 사용하여 나타내며 앞 요소 뒤에 있는 모든 뒷 요소를 선택한다.
h1 + ul {
color: red;
}