목차
가상클래스 (Pseudo Class) - 콜론 1개 사용 가상요소 (Pseudo Element) - 콜론 2개 사용 가상요소에만 링크걸기
가상클래스 (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 이미 방문한 모든 링크 선택.
PS. 가상클래스 개념
특정 상태 표시에 사용. 즉, 특정 사용자 행동 이나 요소의 상태 에 따라 스타일 적용. 주로 사용자 상호작용이나 요소의 상태 변화 에 반응해 스타일을 변경하는 데 사용.
가상요소 (Pseudo Element) - 콜론 2개 사용 PS. 가상요소 개념
실제 DOM 요소를 생성하지 않고, 기존 요소의 일부분 에 스타일 적용하는 데 사용.
주로 요소의 앞이나 뒤 에 콘텐츠를 추가하거나, 요소의 일부 를 스타일링할 때 사용.
가상요소에만 링크걸기
※ 가상요소는 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
최신댓글