선택자(Selector)란❓
CSS의 Rule을 만들 때, HTML의 어떤 요소를 선택할 지 결정할 수 있게 해준다.
주요 선택자
주요 선택자에는 요소(
Type) 선택자, 클래스(Class) 선택자, 아이디(Id) 선택자가 있다.
1. 요소(Type) 선택자
- HTML 요소를 사용하여 선택한다.
- 하나의 전체 웹 페이지에서 일관적으로 적용해야할 때 사용한다.
- 스타일 적용 순위를 생각하여, 주로 CSS 파일 내의 상단부에서 사용한다.
h2 {
color: red;
}✔️ 짚고 넘어가기
일관적으로 적용하는 것이 아닌 특정 요소를 선택하기 위해서는class선택자와id선택자를 사용할 수 있다.
HTML 내용에서 많이 다뤘으니 간략하게 설명.
2. Id 선택자
- 요소 하나에게 하나의 이름을 부여하기 때문에, 이름이 중복되면 안 된다. (유일, 유니크 지켜져야 함)
3. Class 선택자
- HTML 문서 전체에서 사용할 수 있는 셀렉터이다. 중복을 허용하기 때문에 폭 넓은 사용이 가능하다.
class 선택자는 공백을 사용하여 하나의 요소에 여러 개의 클래스를 적용시킬 수 있다.
속성 선택자(Attribute Selecotr)란?
HTML 요소의 속성을 선택하는 선택자이다.
✏️ attr
대괄호를 사용하여 선택할 수 있으며, 대괄호 내부에는 HTML 요소의 속성을 작성한다.
예시 코드
a[target] {
color: red
}코드 설명
a 태그의 target 이라는 속서을 가진 요소를 전부 선택하여, 글자 색상을 red로 바꿔준다.
✏️ attr=value
attr똑같이 대괄호를 사용하지만, 속성의 값까지 작성하여 선택할 수 있다.
< 예시 코드 >
a[target="blank"] {
color: red;
}< 코드 설명 >
a 태그의 target 이라는 속성을 가진 요소의 값이 blank인 것을 모두 선택한다.
선택한 요소의 글자 색상을 red로 바꾼다.
👏🏻 참고로 이 선택자는 input 태그에서 유용하게 활용되는 편이다.
< 예시 코드 >
input[type="submit"] {
color: red;
}✏️ attr^
문자열이 부분적으로 일치해도 속성이 적용되도록 해준다.
< 예시 코드 >
a[href^="https://"] {
color: red;
}< 코드 설명 >
a 태그 중에서 href 속성 중 https://로 시작하는 요소를 선택해준다.
✏️ attr$
문자열의 마지막이 설정한 값으로 끝나면 속성이 적용되도록 해준다.
< 예시 코드 >
a[href$=".com"] {
color: red;
}< 코드 설명 >
a 태그 중에서 href 속성 중 .com으로 끝나는요소를 선택해준다.
✏️ attr*
특정 문자열을 포함하는 모든 요소를 선택할 수 있게 해준다.
참고로*는포함한다.는 의미의와일드카드이다.
< 예시 코드 >
a[href*="example"] {
color: red;
}< 코드 설명 >
a 태그 중에서 href 속성 중 example을 가지고 있는 모든 요소를 선택해준다.
