• 회원가입
  • 로그인
  • 구글아이디로 로그인

[selector] CSS - Pseudo Class + Pseudo Element - (가상클래스 + 가상요소) = 가상선택자 종류 ※ 가상요소에 링크걸기

목차
  1. 가상클래스 (Pseudo Class) - 콜론 1개 사용
  2. 가상요소 (Pseudo Element) - 콜론 2개 사용
  3. 가상요소에만 링크걸기

 

가상클래스 (Pseudo Class) - 콜론 1개 사용

Selector 예제 예제 설명
:active a:active 활성화된 링크 선택.
:checked input:checked 모든 체크된 <input> 요소 선택.
:disabled input:disabled 모든 작동차단된 <input> 요소 선택.
:empty p:empty 자식요소 없는 모든 <p> 요소 선택.
:enabled input:enabled 모든 작동가능한 <input>요소 선택.
:first-child p:first-child 그 부모의 첫번째 자식인 모든 <p> 요소 선택.
:first-of-type p:first-of-type 그 부모의 첫번째 <p> 요소인 모든 <p> 요소 선택.
:focus input:focus 포커스 갖는 (=현재, 커서 위치한) <input> 요소 선택.
:hover a:hover 마우스커서가 위에 올려진 링크 선택.
:in-range input:in-range 지정범위안 값을 갖는 <input> 요소들 선택.
:invalid input:invalid 유효하지 않는 값을 갖는 모든 <input> 요소 선택.
:lang(language) p:lang(ko) "ko"로 시작하는 lang 속성값 갖는 모든 <p> 요소 선택.
:last-child p:last-child 그 부모의 마지막 자식인 모든 <p> 요소 선택.
:last-of-type p:last-of-type 그 부모의 마지막 <p> 요소인 모든 <p> 요소 선택.
:link a:link 모든 미방문 링크 선택.
:not(selector) :not(p) <p> 요소가 아닌 모든 요소 선택.
:nth-child(n) p:nth-child(2) 그 부모의 2번째 자식인 모든 <p> 요소 선택.
:nth-last-child(n) p:nth-last-child(2) 그 부모의 마지막에서 2번째 자식인 모든 <p> 요소 선택.
:nth-last-of-type(n) p:nth-last-of-type(2) 그 부모의 마지막에서 2번째 <p>요소인 모든 <p> 요소 선택.
:nth-of-type(n) p:nth-of-type(2) 그 부모의 2번째 <p> 요소인 모든 <p> 요소 선택.
:only-of-type p:only-of-type 그 부모의 유일한 <p> 요소인 모든 <p> 요소 선택.
:only-child p:only-child 그 부모의 유일한 자식인 모든 <p> 요소 선택.
:optional input:optional required 속성 안 갖는 <input> 요소 선택.
:out-of-range input:out-of-range 지정범위밖 값을 갖는 <input> 요소 선택.
:read-only input:read-only "readonly" 속성 지정된 <input> 요소 선택.
:read-write input:read-write readonly 속성 안 갖는 <input> 요소 선택.
:required input:required required 속성 지정된 <input> 요소 선택.
:root root 웹문서의 root 요소 선택.
:target #news:target 해당 앵커 이름 포함 URL 클릭해
현재 활성화가 된 #hz 요소 선택.
(= 내부링크목적지요소 선택)
:valid input:valid 유효한 값 갖는 모든 <input> 요소 선택.
:visited a:visited 이미 방문한 모든 링크 선택.

 

가상요소 (Pseudo Element) - 콜론 2개 사용

Selector 예제 예제 의미
::after p::after 모든 <p> 요소 뒤에 내용 삽입.
::before p::before 모든 <p> 요소 앞에 내용 삽입.
::first-letter p::first-letter 모든 <p> 요소의 첫번째 글자 선택.
::first-line p::first-line 모든 <p> 요소의 첫번째 라인 선택.
::selection p::selection 사용자 선택요소.

 

가상요소에만 링크걸기

※ 가상요소는 DOM이 아니라서 일반적인 방법으로는 링크 걸기 불가능.

 

<script src="https://code.jquery.com/jquery-latest.js"></script>

<style>

#hz {

  display:inline-block;

  border:1px solid red;

  position: relative;

  pointer-events: none;

}

 

#hz:after {

  content: 'Homzzang.com';

  position: absolute;

  pointer-events: all;

  border:1px solid blue;

  margin-left:10px;

}

</style>

<div id="hz">홈짱닷컴</div>

 

<script>

let hz = document.querySelector('#hz');

hz.addEventListener('click', e => top.location.href="https://homzzang.com");

</script>

 

결과보기


PS. 가상요소 클릭 시, 본래 요소에 내용 추가

 

hz.addEventListener('click', e => e.target.innerText += `입력할 내용`);

 

바람처럼나 님 (210103) https://sunshine7e7.tistory.com/32 

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
selector CSS - 선택자 (Selector) 종류 + 선택자에 사용가능한 문자 (= 선택자 이름짓기 주의사항)
selector CSS - ID선택자, class선택자 + CSS우선순위 ★★★ (= 아이디선택자, 클래스선택자, CSS명시…
selector CSS - * 전체선택자 - 모든 요소 선택. (요소선택자군) ※ 아스테리크 (asterisk) 선택자 = …
selector CSS - element 요소선택자 ★ - 지정 요소 선택. (요소선택자군)
selector CSS - element,element 병렬선택자 ★ - 쉼표로 나열된 여러 요소 선택. (= 여러 요소선택…
selector CSS - element element 자손선택자 ★ - 자손요소 (요소선택자)
selector CSS - element>element 자식선택자 ★ - 직접 자식요소만 선택. (요소선택자, IE7)
selector CSS - element+element 인접선택자 ★★ - 바로 뒤 인접형제요소 (요소선택자, IE7) + …
selector CSS - element~element 형제선택자 ★★ - 지정요소 뒤의 모든 특정형제요소 (요소선택자군…
selector CSS - [attribute] 속성선택자 - 특정 속성 보유 요소 (IE7) ※ 여러 속성 보유 선택자
selector CSS - [attribute=value] 속성선택자 - 지정속성값보유요소 선택 (IE7) ※ 특정 (속성/…
selector CSS - [attribute~=value] 속성선택자 - 특정 속성값단어 (단독 또는 단어앞뒤공백)인 요소…
selector CSS - [attribute|=value] 속성선택자 - 해당속성값 또는 뒤에 하이픈 연결된 속성값 보유 …
selector CSS - [attribute^=value] 속성선택자 ★ - 지정 속성값 문자열로 시작하는 요소. (=시…
selector CSS - [attribute$=value] 속성선택자 - 지정 속성값 문자열로 끝나는 요소 (IE7)
selector CSS - [attribute*=value] 속성선택자 - 지정 속성값 문자열 포함 모든 요소 (IE7)
selector CSS - :link 가상선택자 - 미방문링크 (= 링크선택자)
selector CSS - :visited 가상선택자 ★ -이미 방문한 링크 선택 (= 읽은글/방문글/확인글 표시 = 비지티…
selector CSS - :hover 가상선택자 ★ - 요소에 마우스커서위치시 효과 (= :hover선택자 = 허버선택자,…
selector CSS - :active 가상선택자 - 링크클릭순간 (= 액티브선택자, 링크선택자)
1/4
목록
찾아주셔서 감사합니다. Since 2012