CSS로 특정 요소를 선택하는 방법 <가상선택자>

CSS로 특정 요소를 선택하는 방법 <선택자>

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 글자를 삽입하고 스타일을 빨간색으로 적용한다.