본문 바로가기

Webstoryboy

Category

Explanation

CSS

[CSS] 선택자

CSS 선택자

CSS는 선택자를 통해 요소를 선택할 수 있습니다.


CSS

CSS는 선택자를 통해 요소를 선택할 수 있습니다.

기본 선택자

종류 예시 이름
태그 선택자 p {color:#fff;} p 태그를 선택하여 글씨 색을 하얀색으로 변경합니다.
클래스 선택자 .class {color:#fff;} class 클래스를 선택하여 글씨 색을 하얀색으로 변경합니다.
아이디 선택자 #id {color:#fff;} id 아이드를 선택하여 글씨 색을 하얀색으로 변경합니다.
그룹 선택자 p, div {color:#fff;} p 태그와 div 태그를 선택하여 글씨 색을 하얀색으로 변경합니다.
전체 선택자 * {color:#fff;} 전체 태그를 선택하여 글씨 색을 하얀색으로 변경합니다.

계층 선택자

종류 예시 이름
하위 선택자(Descendant Selector) div p {color:#fff;} div 태그의 모든 자식 중 p 태그를 모두 선택하여 글씨 색을 하얀색으로 변경합니다.
자식 선택자(Child Selector) div > p {color:#fff;} div 태그의 모든 자식 중 첫번째 자식 p 태그를 선택하여 글씨 색을 하얀색으로 변경합니다.
형제 선택자(sibling Selector) div ~ p {color:#fff;} div 태그의 인접한 형제 p 태그를 모두 선택하여 글씨 색을 하얀색으로 변경합니다.
인접 형제 선택자(Adjacent Sibling Selector) div + p {color:#fff;} div 태그의 인접한 형제 첫번째 p 태그를 선택하여 글씨 색을 하얀색으로 변경합니다.

속성 선택자

종류 예시 이름
[name] a[href] a 태그 속성 중에 href가 있으면 선택합니다.
[name="value"] a[href="#header"] a 태그 href 속성의 값이 '#header'이면 선택합니다.
[name~="value"] a[href~="web"] a 태그 href 속성의 값이 'web'을 포함한 요소를 선택합니다.
[name|="value"] a[href|="web"] a 태그 href 속성의 값이 'web'이거나 'web'으로 시작하는 요소를 선택합니다.
[name^="value"] a[href^="web"] a 태그 href 속성의 값이 'web'으로 시작하는 태그를 선택합니다.
[name*="value"] a[href*="web"] a 태그 href 속성의 값이 'web'이 포함되어 있는 태그를 선택합니다.
[name$="value"] a[href$="com"] a 태그 href 속성의 값이 'com'으로 끝나는 태그를 선택합니다.

가상 요소

종류 예시 이름
::first-line p:first-line {color:#fff;} 문단의 첫 줄에 컬러색을 하얀색으로 변경합니다.
::first-letter p:first-letter {color:#fff;} 문단의 첫 글자에 컬러색을 하얀색으로 변경합니다.
::before p:before {content:"시작"} 문단 시작 부분에 '시작'이라는 요소를 추가합니다.
::after p:after {content:"끝"} 문단 끝 부분에 '끝'이라는 요소를 추가합니다.
::selection p:selection {color:#fff;} 드래그로 선택하였을 경우 글씨 색을 하얀색으로 변경합니다.

가상 클래스

종류 예시 이름
:first-child li:first-line {color:#fff;} li 자식 요소 중 첫 번째 자식 요소에게 컬러를 하얀색으로 변경합니다.
:last-child li:last-line {color:#fff;} li 자식 요소 중 마지막 번째 자식 요소에게 컬러를 하얀색으로 변경합니다.
:first-of-type p:first-of-type {color:#fff;} 자식 요소 중 p 태그 첫 번째 자식 요소에게 컬러를 하얀색으로 변경합니다.
:last-of-type p:last-of-type {color:#fff;} 자식 요소 중 p 태그 마지막 번째 자식 요소에게 컬러를 하얀색으로 변경합니다.
:nth-child() li:nth-child(2) {color:#fff;} li 자식 요소 중 2번째 자식 요소에게 컬러를 하얀색으로 변경합니다.
:nth-last-child() li:nth-last-child(2) {color:#fff;} li 자식 요소 중 뒤에서 2번째 자식 요소에게 컬러를 하얀색으로 변경합니다.
:nth-of-type() p:nth-of-type(2) {color:#fff;} 자식 요소 중 p 태그 2번째 자식 요소에게 컬러를 하얀색으로 변경합니다.
:nth-last-of-type() p:nth-last-of-type(2) {color:#fff;} 자식 요소 중 p 태그 뒤에서 2번째 자식 요소에게 컬러를 하얀색으로 변경합니다.
:only-child :only-child {color:#fff;} 자식 요소 중 유일한 태그 자식 요소에게 컬러를 하얀색으로 변경합니다. CSS3
:only-of-type p:only-of-type {color:#fff;} 자식 요소 중 유일한 p 태그 자식 요소에게 컬러를 하얀색으로 변경합니다. CSS3
:not() li:not(:nth-child(2)) {color:#fff;} li 자식 요소 중 2번째 자식 요소를 제외하고 컬러를 하얀색으로 변경합니다.
:root :root {color:#fff;} 기본 루트 요소의 컬러를 하얀색으로 변경합니다.
:empty :empty {color:#fff;} 컨텐츠 요소가 없는 요소의 컬러를 하얀색으로 변경합니다.

링크 가상 클래스

종류 예시 이름
:link a:link {color:#fff;} 방문하지 않는 링크의 글씨 색을 하얀색으로 설정합니다.
:visited a:visited {color:#fff;} 방문한 링크의 글씨 색을 하얀색으로 설정합니다.
:hover a:hover {color:#fff;} 링크 위에 마우스를 올려 놓았을 경우 글씨 색을 하얀색으로 설정합니다.
:active a:active {color:#fff;} 링크가 활성화되었을 경우 글씨 색을 하얀색으로 변경합니다.

폼 관련 선택자

종류 예시 이름
:checked input:checked {color:#fff;} input 태그가 체크되었을 때 글씨 색을 하얀색으로 변경합니다.
:focus input:link {color:#fff;} input 태그에 초점이 맞추어졌을 때 글씨 색을 하얀색으로 변경합니다.
:enabled input:enabled {color:#fff;} input 태그가 사용 가능하면 글씨 색을 하얀색으로 변경합니다.
:disabled input:disabled {color:#fff;} input 태그가 사용 가능하지 않으면 글씨 색을 하얀색으로 변경합니다.






CSS Selector

태그 유형 설명 버전
. .class {color:#fff;} 클래스 선택자 CSS1
# .id {color:#fff;} 아이디 선택자 CSS1
* * {color:#fff;} 전체 선택자 CSS2
element p {color:#fff;} 요소 선택자 CSS1
element, element p, div {color:#fff;} 그룹 선택자 CSS1
element element div p {color:#fff;} 후손 선택자 CSS1
element > element div > p {color:#fff;} 이웃 선택자 CSS2
element + element div > p {color:#fff;} 자식 선택자 CSS2
element ~ element div ~ p {color:#fff;} 형제 선택자 CSS3
[attribute] p [class] {color:#fff;} 속성 선택자 CSS2
[attribute=value] p [class="white"] {color:#fff;} 속성 선택자 CSS2
[attribute~=value] p [class~="white"] {color:#fff;} 속성 선택자 CSS2
[attribute^=value] p [attr^="w"] {color:#fff;} 속성 선택자 CSS3
[attribute*=value] p [attr*="white"] {color:#fff;} 속성 선택자 CSS3
[attribute$=value] p [attr$="w"] {color:#fff;} 속성 선택자 CSS3
:link a:link {color:#fff;} 방문하지 않은 링크 CSS1
:visited a:visited {color:#fff;} 방문한 링크 CSS1
:hover a:hover {color:#fff;} 마우스 오버 링크 CSS1
:active a:active {color:#fff;} 활성화된 링크 CSS1
:focus a:focus {color:#fff;} 포커스된 링크 CSS2
:root a:root {color:#fff;} 문서의 루트 요소 CSS3
:nth-child(n) p:nth-child(3) {color:#fff;} n번째 스타일 적용 CSS3
:nth-last-child(n) p:nth-last-child(n) {color:#fff;} 끝에서 n번째 스타일 적용 CSS3
:nth-of-type(n) p:nth-of-type(n) {color:#fff;} n번째 스타일 적용 CSS3
:nth-last-of-type(n) p:nth-last-of-type(n) {color:#fff;} 끝에서 n번째 스타일 적용 CSS3
::first-letter p::first-letter {color:#fff;} 첫 번째 문장 CSS1
::first-line p::first-line {color:#fff;} 첫 번째 줄 CSS1
:first-of-type p:first-of-type {color:#fff;} 첫 번째 요소의 선택자 CSS3
:last-of-type p:last-of-type {color:#fff;} 마지막 번째 요소의 선택자 CSS3
:only-of-type p:only-of-type {color:#fff;} 해당 요소가 유일한 요소의 선택자 CSS3
:first-child p:first-child {color:#fff;} 첫 번째 자식요소 CSS3
:last-child p:last-child {color:#fff;} 마지막 자식요소 CSS3
:only-child p:only-child {color:#fff;} 자식요소가 유일하게 하나일 때 CSS3
:only-of-child p:only-of-child {color:#fff;} 해당 요소가 유일한 요소 일 때 CSS3
:target :target {color:#fff;} 연결 CSS3
:enabled input[type="text"]:enabled {color:#fff;} 사용할 수 있는 상태 CSS3
:disabled input[type="text"]:disabled {color:#fff;} 사용할 수 없는 상태 CSS3
:checked input:checked {color:#fff;} 체크된 상태 CSS3
:in-range input:in-range {color:#fff;} 인풋 요소의 라인을 설정합니다. CSS3
:out-of-range input:out-of-range {color:#fff;} 인풋 요소의 아웃라인을 설정합니다. CSS3
:valid input:valid {color:#fff;} 인풋 요소가 유효할 때 설정됩니다. CSS3
:invalid input:invalid {color:#fff;} 인풋 요소가 유효하지 않을 때 설정됩니다. CSS3
:optional input:optional {color:#fff;} 인풋 요소의 옵션에 설정됩니다. CSS3
:read-only input:read-only {color:#fff;} 인풋 요소를 읽었을 때 설정됩니다. CSS3
:read-write input:read-write {color:#fff;} 인풋 요소를 쓸 때 설정됩니다. CSS3
:input:required input:required {color:#fff;} 인풋 요소가 필수 일 때 설정됩니다. CSS3
:lang(language) p:lang(it) {color:#fff;} 언어설정에 따라 설정됩니다. CSS2
:empty p:empty {color:#fff;} 빈 상태 CSS3
::before p::before {content: "content";} 요소 앞에 내용 추가 CSS3
::after p::after {content: "content";} 요소 뒤에 내용 추가 CSS3
::selection ::selection {color:#fff;} 마우스로 선택했을 때 CSS3
:not(seletor) :not(p) {color:#fff;} 제외한 CSS3

참고(Reference)

  • CSS

더보기

인스타그램 보기 바로가기

포트폴리오 스터디 바로가기

유튜브 영상보기 바로가기