7/13 css 선택자

css에서는 전체 선택자, 태그 선택자, id class 선택자들 외에도 다양한 선택자들을 사용할 수 있음.

 

이외의 선택자:

후손선택자 / 자손선택자

- 후손선택자의 경우 해당 요소의 하위요소에 있는 특정한 요소를 모두 선택하는 역활을 한다.
    예를들어, 선택자 a가 있다 치면 한칸 띄어쓰고 선택자 b (예시 a b{}) 표현
- 자손선택자는 해당 요소의 바로 밑에 위치하는 요소를 특정해 선택하는 역활을 한다.
    예를 들어 선택자 a > 선택자 b (예시 a>b{}) 바로 밑의 요소만 선택 가능.

태그가 길고 클래스가 많을때 사용하기 편해 유용함.

 

동위선택자: 동위관계에 있는 요소중에 해당요소보다 뒤에 존재하는 특정한 요소를 선택할 때 사용
        - 선택자A+선택자B :   선택자A 바로 뒤에 위치하는 선택자B를 선택 
        - 선택자A~선택자B :   선택자A 뒤에 위치하는 선택자B를 모두 선택 

반응선택자: 마우스 커서 갔다대면 반응함

        - 반응선택자가 걸려있는 div 요소에 커서를 갔다댈때 스타일 교체 : div:hover

        - 반응선택자가 걸려있는 div 요소를 클릭하는 순간 반응해 스타일 교체 - div:active

 

구조선택자:

부모의 요소 안에서 특정한 위치의 요소를 선택할 때 사용. 후손 + 자손 선택자와 함께 많이 사용한다.

first-child

last-child

nth-child: 형재관계의 순번에 위치하는 요소를 선택하는 것으로 수열을 지켜서 표현

1,2,3...등의 n 번호

2n+1 (홀수), 2n (짝수)등의 패턴

 

형태구조선택자 : 일반구조선택자와 비슷하지만 태그 형태를 구분

:first-of-type = 부모박스 안에서 형제관계 중에 첫번째에 위치하는 태그를 선택

:last-of-type = 부모박스 안에서 형제관계 중에 마지막번째에 위치하는 태그를 선택

:nth-of-type(n) = 부모박스 안에서 형제관계 중에 수열번째에 위치하는 태그를 선택

:nth-last-of-type = 부모박스 안에서 형제관계 중에 뒤에서 수열번째에 위치하는 태그를 선택

 

구조선택자 추가

:nth-last-child(n)

부모박스 안에서 형제관계 중에 뒤에서 수별번째에 위치하는 요소를 선택

 

속성 선택자

속성 선택자:특정한 속성을 가진 것 html요소를 선택하는 것.

[속성 이름="속성값"] (종류)

[속성 이름$="속성값"] (src)

[속성이름*="속성값"] (class)

 

input:focus

input에 초점이 맞춰진 상태! (예시로 클릭, 입력중일때)

 

/*:checked input에 check가 된 상태! */

input[type="checkbox"]:checked + div

 

/*+ 동위선택자 바로 뒤에 위치하는 특정요소를 선택*/

 

문자선택자

* ::first-letter

* ::flrist-line

* ::before (그 개쳬의 앞쪽)

* ::after (그 개체의 뒤쪽)

content : 를 통해서 내용을 삽입하기도 함.