[CSS] 가상 클래스 선택자에 대하여(+가상요소 선택자)

CSS 가상 클래스는 선택자에 추가하는 키워드로, 선택한 요소가 특정 상태를 만족할 때 적용됩니다. 예를 들어 :hover를 사용하면 마우스 포인터를 요소에 오버하는 이벤트가 발생하였을 때 특정 CSS를 지정하실 수 있습니다.

 

 가상 클래스 종류 

가상 클래스 종류

• : link = 방문한 적이 없는 링크
• : visited = 방문한 적이 있는 링크
• : hover = 마우스를 롤오버 했을 때
• : active = 요소를 클릭했을 때
• : focus = 요소가 포커스 될 때 (입력 태그 등)
• : checked = 라디오 버튼이나 체크박스가 체크되었을 때
• : first = 첫 번째 요소
• : first-child = 부모 요소의 첫 번째 자식을 호출
• : first-line = 문단의 첫 번째 줄에 적용 (블록 레벨 요소에만 적용)
• : first-letter = 블록 요소의 첫 번째 줄의 첫 번째 문자 선택
• : first-of-type = 형제 관계에 있는 요소 중 첫 번째 요소에 적용
• : last = 마지막 요소
• : last-child = 부모 요소의 마지막 자식 호출
• : last-of-type = 형제 관계에 있는 요소 중 마지막 요소에 적용
• : nth-child(2n+1) = 홀수 책임
• : empty = 내용이 비어있는 요소 선택
• : read-only = "readonly"인 요소 선택

 

가상 요소 종류

• :: before = 요소의 내용 앞에 추가시킬 태그를 지정 (content 속성과 함께 사용)
• :: after = 요소의 내용 뒤에 추가시킬 태그를 지정 (content 속성과 함께 사용)
• :: selection = 드래그하여 선택되는 영역을 지정

 

 가상 클래스 사용법 

구조 선택자

:empty는 내용이 비어있는 요소들을 선택합니다.

p:empty {
    color: red;
}

<p> 태그 요소 중 내용(공백포함)이 비어있는 요소의 스타일을 빨간색으로 적용합니다.

 

:first-child로 첫 번째 형제 요소(단일)를 선택합니다.

p:first-child {
    color: red;
}

모든 형제 요소 중 첫 번째 요소가 <p> 태그일 경우 스타일을 빨간색으로 적용합니다.

 

:last-child로 마지막 형제 요소(단일)를 선택합니다.

p:last-child {
    color: red;
}

모든 형제 요소 중 마지막 요소가 <p> 태그일 경우 스타일을 빨간색으로 적용합니다.

 

 

반응 선택자

: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> 태그 중 링크가 걸려있는 요소를 빨간색으로 적용합니다.

 

:visited로 방문했던 링크가 걸린 요소들을 선택합니다.

a:visited {
    color: red;
}

<a> 태그 중 방문한 적이 있는 요소를 빨간색으로 적용합니다.

 

 

부정 선택자

:not(선택자)로 해당 선택자에 해당하지 않는 요소들을 선택합니다.

p:not(.temp) {
    color: red;
}

<p> 태그 요소에서 class 속성값에 temp가 없는 요소의 스타일을 빨간색으로 적용합니다.

 

 

가상 요소

가상요소는 선택자에 의해 선택된 요소의 특정 부분에 스타일을 적용합니다. 가상 요소는 콜론 2개(::)를 사용합니다.

 

::first-letter로 첫 번째 글자를 선택합니다.

p::first-letter {
    color: red;
}

<p> 태그 요소에서 첫 번째 글자를 빨간색으로 적용합니다.

 

 

::first-line로 첫 번째 줄을 선택합니다.

p::first-line {
    color: red;
}

<p> 태그 요소의 첫 번째 줄을 빨간색으로 적용합니다.

 

::before로 시작 부분을 선택합니다.

p::before {
    content: "!";
    color: red;
}

<p> 태그 요소 앞에 ! 글자를 삽입하고 스타일을 빨간색으로 적용합니다.

 

::after로 끝 부분을 선택한다.

p::after {
    content: "!";
    color: red;
}

<p> 태그 요소 뒤에 ! 글자를 추가하고 스타일을 빨간색으로 적용합니다.

 

::selection로 드래그한 글자를 선택합니다.

::selection {
    color: red;
}

드래그로 선택한 글자의 스타일을 빨간색으로 적용합니다.

 

 

 가상 클래스와 가상 요소의 순서 

가상 클래스와 가상 요소를 함께 사용한다면 가상클래스 : 가상요소 이 순서를 지켜주셔야 합니다.

p:hover:before {
    content: "!";
    color: red;
}

<p> 태그 중 마우스가 올라간 요소 앞에 ! 글자를 삽입하고 스타일을 빨간색으로 적용합니다.