CSS - 선택자(Selector)

Yongwoo Cho·2021년 9월 29일

TIL

목록 보기

10/98

type selector

h2 {
  color: purple;
}

일관성 있게 적용해야 하는 스타일이 있을 때 사용
주로 css 상단부에 작성됨
❗ 하나의 요소만 선택할 때 사용하지 말기

id selector

#welcome-title {
  color: green;
}

❗ id는 중복이 불가능하다

class selector

.blue {
  color: blue;
}
.red {
  color: red;
}

class는 중복이 가능
여러개의 class가 있을 때는 마지막 class가 이전 class보다 우선 적용됨

attribute selector

[attr]

a[target] {
  color: red;
}

a 태그 중 target 속성이 있는 태그들만 css 적용

[attr=value]

a[href="https://example.org"]
{
  color: red;
}

a 태그 중 href 속성이 https://example.org와 같은 태그만 css 적용

[attr^=value]

a[href^="https://example.com"]
{
  color: red;
}

a 태그 중 href 속성이 https://example.com 으로 시작하는 태그만 css 적용

[attr$=value]

a[href^=".com"] {
  color: red;
}

a 태그 중 href 속성이 .com으로 끝나는 태그만 css 적용

[attr*=value]

a[href*="example"] {
  color: red;
}

a 태그 중 href 속성에 example이 있는 모든 태그에 css 적용

Pseudo-class selector ( 가상 클래스 선택자 )

first-child / last-child

li:first-child {
  color: chocolate;
}
.movie:first-child {
  font-size: 30px;
}

모든 li 중에서 첫번째 요소에 css 적용

❗ class 에 사용할 때 class 중에서 첫번째가 무조건 적용되는 것은 아니다

nth-child(n)

li:nth-child(3) {
  color: white;
}

li 중에서 3번째 요소에 css 적용

first-of-type / last-of-type

p:first-of-type {
  color: red;
}
p:last-of-type {
  color : blue;
}

p 태그를 찾고 형제 중 첫번째 요소/마지막 요소에 css 적용

nth-of-type()

p:nth-of-type(3) {
  color: pink;
}

p 태그를 찾고 형제 중 3번째 요소에 css 적용

selector1:not(selector2)

/* input 태그중에 pw클래스를 제외한 모든 input에 css 적용 */
input:not(.pw) {
  background-color: purple;
}
/* input 태그중에 type이 password인 input 제외하고 css 적용 */
input:not([type="password"]) {
  background-color: purple;
}

link, visited
- visited : 방문했을 때만 css 적용
- link : 방문하지 않았을 때만 css 적용
- a {} : 방문여부와 상관없이 css 적용

a:link {
  color: tomato;
}

a:visited {
  color: yellow;
}

hover , active , focus
- hover : 요소에 마우스를 올렸을 때 css 적용
- active : 요소를 클릭하고 떼기전까지 css 적용
- focus : 요소가 포커싱 됐을 때 (tab키,input입력) css 적용

input[type="button"]:hover {
background-color: teal;
color: white;
}
input[type="button"]:active {
  background-color: red;
}
input[type="button"]:focus {
  background-color: yellow;
}

enabled, disabled, checked
- enabled : disabled 속성을 제외하고 css 적용
- disabled : disabled 속성만 css 적용
- checked : checked가 되어있는 요소만 css 적용

input[type="text"]:enabled {
  background-color: orange;
}
input[type="radio"]:checked {
  outline: 3px solid red;
}

Pseudo-Element selector ( 가상 요소 선택자 )

before, after : 꾸밈을 위해 사용

.movie::before {
  content: "MOVIE";
  color: red;
}

movie라는 클래스의 앞에 MOVIE라는 content가 붙고 그 색깔을 red로 css 적용

first-letter / first-line / selection

/* lorem class를 가진 요소의 첫번째 글자만 css 적용 */
.lorem::first-letter {
  color: black;
}
/* lorem class를 가진 요소의 첫번째 줄만 css 적용 */
.lorem::first-line {
  color: black;
}
/* 선택영역(드래그한 영역)에 대한 css 적용 */
.lorem::selection {
  background-color: blue;
}

Selector Combinators (선택자 결합)

하위 선택자 : spacing으로 구분

ul li:last-of-type {
  color: black;
}

자식 선택자 : >로 구분, 직속 자식들만 스타일링

#list > li:last-of-type {
  color: red;
}

일반 형제 선택자 결합 (~)
tag ~ selector { } : tag의 형제들중에서 selector 요소만 css적용
❗ tag가 selector보다 선행되야함

code ~ p {
  color: black;
}

인접 형제 선택자 결합 (+)
selector1 + selector2 { } : selector1 바로 뒤에 selector2가 오면 css 적용

.red + div {
  background-color: white;
}

그룹화 : 여러 요소를 동시에 css 적용시키고 싶을 때 사용하여 그룹화

p,
span {
  color: red;
}

Universal selector (범용 선택자)

/* p 뒤에오는 모든 요소 스타일링 */
p + * {
  color: red;
}

상속 제어하기

inital : 부모의 상속을 끊고 싶을 때
inherit : 무조건 상속을 받게 지정하고 싶을 때
unset : 부모로부터 상속받을 값이 있으면 inherit, 없으면 inital

우선순위

선언된 곳
style 태그, link 태그의 순서에 따라서 뒤에 오는 태그가 우선적으로 css 적용
❗ 인라인 css는 제일 우선순위가 높다
명시도 ( 적용범위가 적을수록 명시도가 높다 )
!important > inline css > id selector > class/attribute/pseudo selector > type selector > * > inherited
코드위치
먼저 선언된 css가 우선순위 낮음