본문 바로가기

① 기본/CSS

실무에서 자주 쓰는 필수 CSS 선택자 정리

728x90

 실무에서 자주 쓰는 필수 CSS 선택자

 

아래 리스트는 실무에서 자주 쓰는 CSS 선택자입니다.

 

종류 선택자 예시 설명
클래스선택자 .class .intro intro를 클래스로 가진 모든 요소
Both .class1.class2 .name1.name2 name1과 name2를 둘 다 가진 모든 요소
자손선택자 .class1 .class2 .name1 .name2 name1의 자식 중 name2를 클래스로 가진 모든 요소
아이디선택자 #id #firstname firstname을 아이디로 가진 모든 요소
전체선택자 * * 모든 요소를 선택, 렌더링 성능 저하 가능
요소선택자 element p 모든 p 요소
And element,element div, p 모든 div 요소와 모든 p 요소
자손선택자 element>element div > p 부모가 div 요소인 모든 p 요소
인접 형제 선택자 element+element div + p div 요소 바로 뒤에 배치되는 첫 번째 p 요소
일반 형제 선택자 element1~element2 p ~ ul p 요소가 앞에 오는 모든 ul 요소
속성선택자 [attribute] [target] 대상 속성이 있는 모든 요소
[attribute=value] [target=_blank] target="_blank"가 있는 모든 요소
[attribute~=value] [title~=flower] "꽃"이라는 단어가 포함된 제목 속성을 가진 모든 요소
[attribute|=value] [lang|=en] "en"으로 시작하는 lang 속성 값을 가진 모든 요소
[attribute^=value] a[href^="https"] href 속성 값이 "https"로 시작하는 모든 a 요소
[attribute$=value] a[href$=".pdf"] href 속성 값이 ".pdf"로 끝나는 모든 a 요소
[attribute*=value] a[href*="w3schools"] href 속성 값에 하위 문자열 "w3schools"가 포함 된 모든 a 요소
구조선택자 :first-child p:first-child 부모의 첫 번째 자식인 모든 p 요소
:last-child p:last-child 부모의 마지막 자식인 모든 p 요소
:nth-child(n) p:nth-child(2) 부모의 두 번째 자식인 모든 p 요소
:nth-last-child(n) p:nth-last-child(2) 마지막 자식부터 계산하여 부모의 두 번째 자식인 모든 p 요소
:first-of-type p:first-of-type 부모의 첫 번째 p 요소인 모든 p 요소
:last-of-type p:last-of-type 부모의 마지막 p 요소인 모든 p 요소
:nth-of-type(n) p:nth-of-type(2) 부모의 두 번째 p 요소인 모든 p 요소
:nth-last-of-type(n) :nth-last-of-type(2) 마지막 자식부터 계산하여 부모의 두 번째 p 요소인 모든 p 요소
:only-of-type p:only-of-type 부모의 유일한 p 요소인 모든 p 요소
반응선택자 :active a:active a 요소가 활성화된 상태(클릭, 키보드 이벤트 등)
:hover a:hover a 요소 위에 마우스 포인터가 올라가 있는 상태
문자선택자 ::after p::after 각 p 요소의 내용 뒤에 {무언가}를 삽입하라
::before p::before 각 p 요소의 내용 앞에 {무언가}를 삽입하라
::first-letter p::first-letter 모든 p 요소의 첫 글자를 선택
::first-line p::first-line 모든 p 요소의 첫 번째 줄을 선택
::selection ::selection 사용자가 선택한 요소 부분을 선택
상태선택자 :focus input:focus 포커스가 있는 입력 요소를 선택
:enabled input:enabled 활성화된 모든 input 요소
:disabled input:disabled 비활성화 된 모든 input 요소
:checked input:checked 선택된 모든 input 요소.
링크선택자 :link a:link 방문하지 않은 모든 링크
:visited a:visited 방문한 적 있는 모든 링크

 

 

 

 

 선택자를 시각적으로 표현해주는 사이트

 

설명만 봐서는 이해가 잘 안되는 분들은 이 사이트를 참고해주세요. 시각적으로 선택자를 확인할 수 있습니다.

 

 

 

 

 자료 출처

 

[w3schools] -  www.w3schools.com/cssref/css_selectors.asp

728x90

'① 기본 > CSS' 카테고리의 다른 글

display:none 과 visibility:hidden 의 차이  (0) 2021.04.11