TIL 3주차 - 1. CSS 셀렉터

selector

section > div {} : section 하위 div 모든 엘리먼트
section + div {} : section 인접한 하나의 형제 div 엘리먼트
section ~ div {} : section 모든 형제 div 엘리먼트

attribute 셀렉터

a[href] { }
p[id="only"] { }
p[class~="out"] { }
p[class|="out"] { }
section[id^="sect"] { }
div[class$="2"] { }
div[class*="w"] { }

참고)
https://developer.mozilla.org/ko/docs/Web/CSS/Attribute_selectors

가상클래스

• 가상 클래스 선택자는 우선 순위를 두고 해야 오작동이 없음
• 순서 : link(방문한적 없는 링크) - visited(방문한적 있는 링크) - hover(마우스를 올렸을때) - active(마우스로 클릭했을때) - focus(tab을 눌렀을때)

a:link { }
a:visited { }
a:hover { }
a:active { }
a:focus { }

요소 상태 셀렉터

input:checked + span { }
input:enabled + span { }
input:disabled + span { }

부정 셀렉터

input:not([type="password"]) { }

div:not(:nth-of-type(2)) { }
: div태그 중 2번째 div태그를 제외한 모두

div :not(p:nth-of-type(2)) {color: red;}
: div의 하위 태그 중 2번째 p태그를 제외한 모든 하위 태그

input : valid invalid

input[type="text"]:valid { }
input[type="text"]:invalid { }

---

nth-child(n) vs nth-of-type(n)

자신이 속한 형제 요소로 규칙을 정의

<div class="box">
    <p>1 p태그1</p>
    <span>2 span태그1</span>
    <p>3 p태그2</p>
    <span>4 span태그2</span>
    <p>5 p태그3</p>
</div>

nth-child(n)

nth-child(odd) : 홀수 엘리먼트
nth-child(even) : 짝수 엘리먼트
first-child
last-child

div p:nth-child(3){}
//-> <p>3 p태그2</p>

div의 모든 자식 엘리먼트 중 3번째에 오는 엘리먼트를 나타냄.
3번째에 p태그가 아니라면 적용X

nth-of-type(n)

nth-of-type(odd) : 홀수 엘리먼트
nth-of-type(even) : 짝수 엘리먼트
first-of-type
last-of-type

div p:nth-of-type(3){}
//-> <p>5 p태그3</p>

div의 p태그 자식 엘리먼트 중 3번째에 오는 p태그를 나타냄.

---

before after

---

캐스케이딩

하나의 엘리먼트에 대해서 다양한 효과가 영향력을 행사하려고 할 때 우선순위를 어떻게 설정하는가에 대한 규칙

!important
style attribute
id selector
class selector
tag selector

우선순위

---

reset

css reset

body {
  margin: 0;
  padding: 0;
}

* {
   box-sizing: border-box;
}