CSS로 특정 요소를 선택하는 방법 <선택자>
CSS 기본 문법은 선택자 { 속성1: 값1; 속성2: 값2; ... } 입니다. HTML 문서에 여러 스타일을 적용하는데 CSS로 특정 요소를 선택하는 방법에 대해서 정리합니다.
blog.pages.kr
HTML 문서에 여러 스타일을 적용하는데 CSS로 특정 요소를 선택하는 방법에 대해서 정리합니다.
가상선택자는 기본선택자 뒤에 :(콜론)을 붙인 가상 클래스, ::(콜론두개)을 붙인 가상 요소로 요소의 특정 부분을 선택합니다.
구조 선택자
:empty로 내용이 비어있는 HTML 요소들을 선택한다.
p:empty {
color: red;
}<p> 태그 요소 중 내용(공백포함)이 전혀 없는 요소의 스타일을 빨간색으로 적용한다.
:first-child로 첫번째 형제 요소(단일)를 선택한다.
p:first-child {
color: red;
}모든 형제 요소 중 첫번째 요소가 <p> 태그일 경우 스타일을 빨간색으로 적용한다.
:last-child로 마지막 형제 요소(단일)를 선택한다.
p:last-child {
color: red;
}모든 형제 요소 중 마지막 요소가 <p> 태그일 경우 스타일을 빨간색으로 적용한다.
:nth-child(수열)로 (수열)번째 형제 요소(단일)를 선택한다.
p:nth-child(2) {
color: red;
}모든 형제 요소 중 2번째 요소가 <p> 태그일 경우 스타일을 빨간색으로 적용한다.
(수열)에는 정수값 외 계산식을 통해 규칙적인 변수값을 사용할 수 있다.
(수열) 대신 xn+y로 특정한 규칙적인 요소들을 선택한다.
x와 y는 정수(양수,음수)이고, n은 0 부터 1,2,3,... 차례대로 양수가 대입되어 계산된다.
p:nth-child(2n+1) {
color: red;
}모든 형제 요소 중 1,3,5,7,...번째 요소가 <p> 태그일 경우 스타일을 빨간색으로 적용한다.
odd로 홀수번째 요소들을 선택하고, even로 짝수번째 요소들을 선택한다.
p:nth-child(odd) {
color: red;
}
p:nth-child(even) {
color: red;
}첫번째는 모든 형제 요소 중 홀수번째 요소가 <p> 태그일 경우 스타일을 빨간색으로 적용한다.
두번째는 모든 형제 요소 중 짝수번째 요소가 <p> 태그일 경우 스타일을 빨간색으로 적용한다.
:nth-last-child(수열)로 뒤에서 (수열)번째 형제 요소(단일)를 선택한다.
p:nth-last-child(2) {
color: red;
}모든 형제 요소 중 뒤에서 2번째 요소가 <p> 태그일 경우 스타일을 빨간색으로 적용한다.
:first-of-type로 첫번째 특정 태그 형제 요소(단일)를 선택한다.
p:first-of-type {
color: red;
}<p> 태그 형제 요소 중 첫번째 요소의 스타일을 빨간색으로 적용한다.
:last-of-type로 마지막 특정 태그 형제 요소(단일)를 선택한다.
p:last-of-type {
color: red;
}<p> 태그 형제 요소 중 마지막 요소의 스타일을 빨간색으로 적용한다.
:nth-of-type(수열)로 (수열)번째 특정 태그 형제 요소(단일)를 선택한다.
p:nth-of-type(2) {
color: red;
}<p> 태그 형제 요소 중 2번째 요소의 스타일을 빨간색으로 적용한다.
:nth-last-of-type(수열)로 뒤에서 (수열)번째 형제 요소(단일)를 선택한다.
p:nth-last-of-type(2) {
color: red;
}<p> 태그 형제 요소 중 뒤에서 2번째 요소의 스타일을 빨간색으로 적용한다.
반응 선택자
:hover로 커서가 올라와 있는 요소들을 선택한다.
p:hover {
color: red;
}<p> 태그 중 마우스가 올라간 요소의 스타일을 빨간색으로 적용한다.
:active로 클릭하고 있는 요소들을 선택한다.
p:active {
color: red;
}<p> 태그 중 마우스를 클릭한 요소의 스타일을 빨간색으로 적용한다.
상태 선택자
:focus로 현재 입력 커서가 있는 요소(단일)를 선택한다.
input:focus {
color: red;
}<input> 태그 요소 중 입력 커서가 깜빡이고 있는 요소의 스타일을 빨간색으로 적용한다.
:checked로 체크되어 있는 요소들을 선택한다.
input:checked {
color: red;
}<input> 태그 요소 중 체크박스, 라디오 버튼이나 드롭다운 메뉴의 선택되어 있는 요소의 스타일을 빨간색으로 적용한다.
:enabled로 활성화되어 있는 요소들을 선택한다.
input:enabled {
color: red;
}<input> 태그 요소 중 내용을 수정할 수 있는 요소의 스타일을 빨간색으로 적용한다.
:disabled로 비활성화되어 있는 요소들을 선택한다.
input:disabled {
color: red;
}<input> 태그 요소 중 내용을 수정할 수 없는 요소의 스타일을 빨간색으로 적용한다.
링크 선택자
:link로 링크가 걸린 요소들을 선택한다.
a:link {
color: red;
}<a> 태그 요소 중 href 속성값이 있는 요소의 스타일을 빨간색으로 적용한다.
:visited로 방문했던 링크가 걸린 요소들을 선택한다.
a:visited {
color: red;
}<a> 태그 요소 중 href 속성값이 방문했던 URL인 요소의 스타일을 빨간색으로 적용한다.
부정 선택자
:not(선택자)로 해당 선택자에 해당하지 않는 요소들을 선택한다.
p:not(.korea) {
color: red;
}<p> 태그 요소 중 class 속성값에 korea가 없는 요소의 스타일을 빨간색으로 적용한다.
가상 요소
선택자에 의해 선택된 요소의 특정 부분에 스타일을 적용한다. 가상 요소는 콜론(:)을 2개 사용하지만, 1개 사용해도 대부분 브라우저에서 정상적으로 작동한다.
::first-letter로 첫 번째 글자를 선택한다.
p::first-letter {
color: red;
}<p> 태그 요소의 첫 번째 글자의 스타일을 빨간색으로 적용한다.
문장부호('-', '_', 따옴표, 괄호 등)로 시작할 경우 그 문장 부호부터 본문의 첫 번째 글자까지 선택한다.
예를들어, 요소의 내용이 <p>"korea seoul"</p>이라면 "k(두글자)가 선택된다.
::first-line로 첫 번째 줄을 선택한다.
p::first-line {
color: red;
}<p> 태그 요소의 첫 번째 줄의 스타일을 빨간색으로 적용한다.
::before로 시작 부분을 선택한다.
p::before {
content: "korea";
color: red;
}<p> 태그 요소 앞에 korea 글자를 삽입하고 스타일을 빨간색으로 적용한다.
::after로 끝 부분을 선택한다.
p::after {
content: "korea";
color: red;
}<p> 태그 요소 뒤에 korea 글자를 추가하고 스타일을 빨간색으로 적용한다.
::selection로 드래그한 글자를 선택한다.
::selection {
color: red;
}드래그로 선택한 글자의 스타일을 빨간색으로 적용한다.
'color', 'background-color', 'cursor', 'caret-color', 'outline-*', 'text-decoration-*', 'text-shadow' 속성만 적용할 수 있다.
가상 클래스와 가상 요소의 순서
가상 클래스와 가상 요소를 함께 이용할 경우에는 가상 클래스 : 가상 요소 순서를 지켜야 한다.
p:hover:before {
content: "korea";
color: red;
}<p> 태그 중 마우스가 올라간 요소 앞에 korea 글자를 삽입하고 스타일을 빨간색으로 적용한다.
댓글