클래스 선택자만 알면 되겠지 생각한 사람
CSS 강의를 들을 때 선택자 강의를 듣고 아주 간단하구먼? 별거없네라고 생각했는데... 제대로 공부해보니까 선택자 종류가 어마어마어마어마하더라..
그래서 놓친 선택자들도 확인하고 다시 한 번 복습하고자 오늘은 선택자를 공부하도록 하겠다.
선택자 (selector)
특정한 HTML 태그를 선택할 때 사용하는 기능.
HTML 태그를 선택하여 해당 태그에 원하는 스타일이나 기능을 적용할 수 있음.
h1 {
color: red;
background-color: orange;
}여기서 h1을 선택자라고 부른다.
선택자의 종류
전체 선택자
* { color: red; }HTML 페이지 내부의 모든 태그를 선택하는 선택자
(body 태그 뿐아니라 html 태그, head 태그, title 태그, style 태그까지 선택됨)
태그 선택자
h1 { color: red; }특정한 태그를 선택하는 선택자
아이디 선택자
#header { color: red; }아이디 속성을 가지고 있는 태그를 선택하는 선택자
<div id="header"></div>아래와 같은 태그를 의미한다.
클래스 선택자
.select { color: red; }특정한 클래스를 가지고 있는 태그를 선택하는 선택자
<div class="select"></div>아래와 같은 태그를 의미한다.
li.select { color: red; }다음과 같이 태그 선택자와 클래스 선택자를 같이 사용하면 정확한 태그 선택이 가능.
실무에서 가장 많이 사용되는 선택자 지정 방법.
속성 선택자
input[type=text] { color: red; }특정 속성 안의 값이 특정 값과 같은 문서 객체를 선택하는 선택자
예시 코드는 input 태그 중 type 속성값을 text로 가지는 태그를 선택하게 된다.
다른 선택자와 함께 사용될 수 있고, 단독으로도 사용 가능하다.
아래와 같은 코드를 출력하게 되면,
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] { background: red; }
</style>
</head>
<body>
<form>
<input />
<input type="text" />
</form>
</body>
</html>
다음과 같이 type="text"를 추가해준 input만 background가 빨간색으로 처리되었다.
즉, CSS는 HTML 태그가 기본 출력 값에는 관심을 가지지 않는다.
문자열 속성 선택자
img[src$=png] { border: 1px solid red; }태그에 지정한 속성의 특정 문자열을 확인하는 선택자
자주 사용되지 않는 선택자.
선택자[속성~=값] : 속성 안의 값이 특정 값을 단어로 포함하는 태그를 선택
선택자[속성|=값] : 속성 안의 값이 특정 값을 단어로 포함하는 태그를 선택
선택자[속성^=값] : 속성 안의 값이 특정 값으로 시작하는 태그를 선택
선택자[속성$=값] : 속성 안의 값이 특정 값으로 끝나는 태그를 선택
선택자[속성*=값] : 속성 안의 값이 특정 값을 포함하는 태그를 선택
[속성~=값]과 [속성|=값]
하이픈(-)이 들어간 단어를 구분하는 방법이 다름. 예를 들어 ko-kr 글자를 인식할 때,
[속성~=값]은 ko-kr로 인식하고, [속성|=값]은 ko와 kr로 인식한다.
후손 선택자, 자손 선택자
자손과 후손 차이
후손 선택자
#header h1 { color: red; }선택자A의 후손에 위치하는 선택자B를 선택하는 선택자
예시 코드는 id 속성 값으로 header를 가지는 태그의 후손 h1 태그를 선택하게 된다.
만약, #header 태그의 후손에 위치하는 h1 태그와 #header 태그의 후손에 위치하는 h2 태그를 선택하고 싶을 땐 다음과 같이 해야 한다.
#header h1, #header h2 { color: red; }만약 #header h1, h2로 하게 되면 h2는 일반적인 h2 태그가 선택되게 된다.
자손 선택자
#header > h1 { color: red; }선택자A의 자손에 위치하는 선택자B를 선택하는 선택자
동위 선택자
h1 + h2 { color: red; }
h1 ~ h2 { background-color: orange; }선택자A + 선택자B : 선택자A 바로 뒤에 위치하는 선택자B를 선택
선택자A ~ 선택자B : 선택자A 뒤에 위치하는 선택자B를 선택
다음과 같은 html 코드를 출력해보면
<!DOCTYPE html>
<html>
<head>
<style>
h1 + h2 { color : white; }
h1 ~ h2 { background-color: red;}
</style>
</head>
<body>
<h1>Header1</h1>
<h2>Header2</h2>
<h2>Header3</h2>
<h2>Header4</h2>
<h2>Header5</h2>
<h2>Header6</h2>
</body>
</html>
이미지와 같이 출력된다.
즉, h1 태그 바로 뒤에 위치하는 h2 태그의 color를 white로 적용하고, h1 태그 뒤에 위치하는 h2 태그의 background-color를 red로 적용한다.
반응 선택자
h1:hover { color: red; }:active : 사용자가 마우스로 클릭한 태그를 선택
:hover : 사용자가 마우스를 올린 태그를 선택
상태 선택자
input:disabled { background-color: grey; }:checked : 체크 상태의 input 태그를 선택
:focus : 초점이 맞추어진 input 태그를 선택
:enabled : 사용 가능한 input 태그
:disabled : 사용 불가능한 input 태그
구조 선택자
li:nth-child(2n) { color: red; }:first-child : 형제 관계 중 첫 번째에 위치하는 태그를 선택
:last-child : 형제 관계 중 마지막에 위치하는 태그를 선택
:nth-child(수열) : 형제 관계 중 앞에서 수열 번째 태그를 선택
:nth-last-child(수열) : 형제 관계 중 뒤에서 수열 번째 태그를 선택
형태 구조 선택자
h1:first-of-type { color: red; }:first-of-type : 형제 관계 중에서 첫 번째로 등장하는 특정 태그를 선택
:last-of-type: 형제 관계 중에서 마지막으로 등장하는 특정 태그를 선택
:nth-of-type(수열) : 형제 관계 중에서 앞에서 수열 번째로 등장하는 특정 태그를 선택
:nth-last-of-type(수열) : 형제 관계 중에서 뒤에서 수열 번째로 등장하는 특정 태그를 선택
문자 선택자
p::first-letter { color: red; }태그 내부 특정 조건의 문자를 선택하는 선택자
(가상 요소 선택자로 :: 기호를 사용하는 것이 표준이나, :를 사용해도 정상적으로 작동)
::first-letter : 첫 번째 글자를 선택
::first-line : 첫 번째 줄을 선택
전후 문자 선택자
p::before { content: '<before>'; }특정 태그 전후에 위치하는 공간을 선택하는 선택자
전후 문자 선택자에만 content 속성을 사용할 수 있음.
::after : 태그 뒤에 위치하는 공간을 선택
::before : 태그 앞에 위치하는 공간을 선택
반응 문자 선택자
p::selection { color: red; }사용자가 문자와 반응해서 생기는 영역을 선택하는 선택자 즉, 사용자가 드래그한 글자를 선택.
링크 선택자
a:visited { color: red; }href 속성을 가지고 있는 a 태그에 적용되는 선택자
:link : href 속성을 가지고 있는 a 태그를 선택
:visited : 방문했던 링크를 가지고 있는 a 태그를 선택
부정 선택자
input:not([type:password]) { color: red; }선택자를 반대로 적용하는 선택자
참고 자료
