css 복수 선택자

yo·2020년 4월 19일
0
post-custom-banner

클래스 여러개 사용하기

-클래스명 하나를 적고 띄어쓰기 후 새로운 클래스명을 적으면 된다.
name1이라는 클래스와 name2라는 클래스 두개 적용의 예시.
-예시) class = "name1 name2"

class와 tag선택자 분류하기

-name이라는 클래스명을 가진 여러 태그가 있다고 생각해보자.
예를 들어 p tag와 strong tag가 같은 'a'클래스를 공유한다. 이때 'a'클래스면서 p tag만을 선택하려 할 때 방법은 아래와 같이 하면 된다.
p.name{}

하위 선택자

1)<li>안에 purple이라는 클래스를 가진 strong 태그가 있다고 하자.
2)동시에 <p> 안에 purple이라는 클래스를 가진 strong 태그가 있다고 하자.
이때 2) 만 선택하려면 다음처럼 하면 된다.
p .purple{}
가장 중요한 것은 중간에 있는 space!!

위와 같은 방법으로 부모선택자 안에 있는 특정 자식 선택자만 선택해 css를 적용할 수 있다.

복수의 선택자 선택하기(선택자 그룹화)

-h1과 h2의 css속성을 동시에 적용하고 싶다면?
h1 뒤에 콤마 후 space 한 칸 뛴다음 h2쓰면 된다.
문법: h1, h2{}

가상선택자

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

a:link = 사용자가 아직 방문하지 않은 페이지
a:visited = 사용자가 이미 방문한 페이지
a:hover = 마우스가 올라가 있는 페이지
a:active = 현재 활성화된 요소
a:focus = tab키와 같은 요소를 누를 때

css 선택자 우선순위

-id > class > p
-동일한 레벨이라면 아래쪽에 위치하는 것이 우선순위
-동일한 레벨일 때 우선순위를 부여하려면 앞에 p를 붙여줘도 된다 (예. p.classname{})

profile
Never stop asking why
post-custom-banner

0개의 댓글