Css 선택자 selector 정리

주요 선택자 - Selector Type, Class, Id

 

See the Pen Untitled by beomjunkwon (@bjkwon) on CodePen.

- Type Slector / 전체 선택자

- ID Selector / 중복없이 하나만 사용

- Class Selector / 여러가지에 사용가능. 공백으로 다른 class도 추가 가능. 두 개 이상 class 추가 시 뒤에 있는 class가 적용

 

 

---

속성 선택자 - [attr], [attr=value]

 

See the Pen Untitled by beomjunkwon (@bjkwon) on CodePen.

1. [arrt] / 속성을 지정하여 선택

2.[attr=value] / 속성과 value값을 지정하여 선택

3. [attr^=value] / value 앞 부분이 일치하는 요소들
4. [attr$=value] / value 뒷 부분이 끝나는 요소들
5. [attr*=value] / value 의 특정 단어가 들어가있는 요소들

---

Pseudo-Class Selector (가상 클래스 선택자)

 

See the Pen Untitled by beomjunkwon (@bjkwon) on CodePen.

1. first-child / last-child, 첫 자식요소, 마지막 자식요소

- 만약 첫 요소, 마지막 요소가 없을때는? 적용되지 않는다.

2. nth-child / n번째 요소 / 2n == 짝수(even), 2n-1 == 홀수(odd)

 

See the Pen Untitled by beomjunkwon (@bjkwon) on CodePen.

1. :first-of-type / :last-of-type / class를 사용하게 되면 모든 요소의 첫번째, 마지막 요소를 같이 적용

2. :nth-of-type() / 요소의 n번째들에 적용

 

See the Pen Untitled by beomjunkwon (@bjkwon) on CodePen.

- selector:not(selector) 선택한 요소를 제외한 나머지 요소들

 

 

 

See the Pen Untitled by beomjunkwon (@bjkwon) on CodePen.

- a태그 클릭하기전, 클릭한 후

 

 

 

See the Pen Untitled by beomjunkwon (@bjkwon) on CodePen.

- hover, actiove, focus

- 코드 작성시 순서는 LVHA / link -> visted -> hover -> active

 

 

See the Pen Untitled by beomjunkwon (@bjkwon) on CodePen.

enabled, disabled, checked

- enabled : 활성화 되어 있는 요소들

- disabled : 비활성화 되어 있는 요소들

- checked : 비활성화 되어 있는 요소들

---

 

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

See the Pen Untitled by beomjunkwon (@bjkwon) on CodePen.

- css요소이기 때문에 선택 또는 복사도 되지 않는다.

- after = 앞

- favorite = 뒤

 

See the Pen Untitled by beomjunkwon (@bjkwon) on CodePen.

first-letter, first-line, selection

- first-letter : 첫 글자 

- first-line : 첫 줄

- selection : 선택 영역

---

Selector Combinators 선택자 결합

See the Pen Untitled by beomjunkwon (@bjkwon) on CodePen.

하위( ), 자식(>)

- 하위 선택자 : 공백을 통해서 사용

- 자식 선택자 : > 를 통해서 사용

 

 

See the Pen Untitled by beomjunkwon (@bjkwon) on CodePen.

형제선택자, 그룹화

1. 일반 형제 선택자 결합 (~)

- 앞에 있는 선택자는 뒤에 있는 선택자 앞에 있어야한다.

- 앞에 선택한 요소의 뒤에 있는 일치하는 선택자들에게 적용!

 

2. 인접 형제 선택자 결합 (+)

- 앞에 선택한 요소의 바로 밑에 인접해 있는 경우에만 적용

 

3. 그룹화 (,)

- 여러개를 선택할 때 , 를 통해서 사용

 

---

범용 선택자 (Universal Selector) (*)

* 기호로 사용

- 모든 요소에 적용

---

상속 제어하기 - initial, inherit, unset

See the Pen Untitled by beomjunkwon (@bjkwon) on CodePen.

- initial : 상속받지 않도록 하는 설정 값

- inherit : 모든 스타일을 부모의요소를 따라서 적용된다.

- unset : 

   1. 부모로부터 상속받을 값이 있을 때 : inherit

   2. 부모로부터 상속받을 값이 없을 때 : initial

      *상속받을 값들이 있는 것들은 받고 없는 값들은 재정의 할 때 사용