CSS 선택자

YongWan·2023년 6월 12일

목록 보기

4/9

주요 선택자

/* Type */
h1 {}

/* Class */
.name {}

/* ID */
#name {}

속성 선택자

/* [attr] */
a[target] {}

/* [attr=value] */
a[href="www.name.com"] {}

/* [attr^=value] */
/* value로 시작하는 모든 값(태그와 속성에 한해서) */
a[href^="www"] {}

/* [attr$=value] */
/* value로 끝나는 모든 값(태그와 속성에 한해서) */
a[href$="com"] {}

/* [attr*=value] */
/* value가 존재하는 모든 값(태그와 속성에 한해서) */
a[href*="name"] {}

가상 클래스 선택자

/* first-child */
/* 해당 선택자의 형제 중 가장 첫번째 요소(만약 첫번째 요소가 선택자와 동일하지 않다면 적용 X) */
li:first-child {}

/* last-child */
/* 해당 선택자의 형제 중 가장 마지막 요소(만약 마지막 요소가 선택자와 동일하지 않다면 적용 X) */
li:last-child {}

/* nth-child(n) */
/* 해당 선택자의 형제 중 n번째 요소 */
li:nth-child(1) {}

/* first-of-type */
/* 해당 선택자를 가진 형제들 중 첫번째 요소 */
/* class로 선택할 경우 해당 class를 가진 형제 중 여러 태그가 있다면 각 태그마다의 첫번째 요소 */
li:first-of-type {}

/* last-of-type */
/* 해당 선택자를 가진 형제들 중 마지막 요소 */
/* class로 선택할 경우 해당 class를 가진 형제 중 여러 태그가 있다면 각 태그마다의 마지막 요소 */
li:last-of-type {}

/* nth-of-type */
li:nth-of-type {}

/* not */
/* input태그를 선택하는데 pw라는 class를 가진 input태그는 제외 (class외에 type등도 적용 가능) */
input:not(.pw) {}
input:not([type="email"]) {}

/* link */
/* 해당 태그의 link를 방문하지 않았을 경우 */
a:link {}

/* visited */
/* 해당 태그의 link를 방문했을 경우 */
a:visited {}

LVHA = link > visited > hover > active 순으로 스타일이 덮어씌어진다. active를 사용하려면 앞의 다른 선택들 뒤에 사용해야 한다.

/* hover*/
input[type="button"]:hover {}

/* active */
/* 마우스를 클릭했을때 때면 스타일 풀림 */
input[type="button"]:active {}

/* foucs */
/* 특정 요소의 포커싱 대표적으로 tab key를 통한 포커싱 or input=text의 포커싱 */
input[type="button"]:foucs {}

/* enabled */
input[type=text]:enabled {}

/* disabled */
input[type=text]:disabled {}

/* checked */
input[type=radio]:checked {}

가상 요소 선택자

after, before는 의미가 없는 꾸밈의 용도로 대부분 사용

/* after */
li::after {}

/*before*/
li::before {}

/* first-letter */
/* 텍스트 컨텐츠의 첫번째 글자에만 스타일 적용 (before에도 적용됨) */
p::first-letter {}

/* first-line */
/* 텍스트 컨텐츠의 첫번째 줄(브라우저 사이즈에 따라 유동적으로)에만 스타일 적용 (before에도 적용됨) */
p::first-line {}

/* selection */
/* 선택된 영역에 스타일 적용(대표적으로 드래그) */
p::selection {}

선택자 결합- 하위, 자식

/* 하위 */
/* ul안에 있는 모든 li */
ul li {}

/* 자식 */
/* ul의 바로 자식인 모든 li */
ul > li {}

형제 선택자, 그룹화

<div>
  <p>P</p>
  <span>Span</span>
  <code>Code</code>
  <p>P</p>
  <div>Div</div>
</div>

/* 일반 형제 선택자 결합 (~) */
/* 선택자(code)를 기준으로 뒤에 있는 모든 선택자(p)를 선택 */
code ~ p {}

/* 인접 형제 선택자 결합 (+) */
/* 선택자(code)를 기준으로 바로 뒤에 있는 선택자(p)만 선택 */
code + p {}

/* 그룹화 */
p, span, code {}

범용 선택자(_)

/* p태그 바로 뒤에 있는 선택자 */
p + * {}

/* div의 자식으로 있는 모든 선택자 */
div > * {}

상속 제어하기 - initial

/* 부모로부터 스타일 상속 X, 브라우저 초기값으로 설정 */
.name {all: initial;} /* 모든 스타일 상속 X */
.name {color: initial;} /* color 상속 X */

상속 제어하기 - inherit, unset

/* 부모로부터 스타일 상속 */
.name {all: inherit;} /* 모든 스타일 상속 */

/* unset */
/* 부모로부터 상속받을 값이 있을 때: inherit */
/* 부모로부터 상속받을 값이 없을 때: initial */
.name {all: unset;}