CSS(고급 css 선택자)

김한나·2021년 9월 17일
0

CSS

목록 보기
5/9

연결 선택자

-선택자와 선택자를 연결해 적용 대상을 한정하는 선택자
-컴비네이션 선택자 또는 조합 선택자 라고도 함

하위 선택자 = 지정한 모든 하위 요소에 스타일 적용하기

<--기본형-->
상위요소 하위요소

-부모 요소에 포함된 모든 하위 요소에 스타일이 적용된다
-자식 요소뿐만 아니라 손자 요소, 손자의 손자 요소 등 모든 하위 요소까지 적용
-하위 선택자를 정의할 때는 상위 요소와 하위 요소를 나란히 쓴다

자식 선택자 = 자식 요소에만 스타일 적용하기

<--기본형-->
부모요소 > 자식요소

-자식 요소에 스타일 적용하는 선택자
-두 요소 사이에 >(부등호)를 표시해 부모 요소와 자식 요소를 구분

인접 형제 선택자 = 가장 가까운 형제 요소에 스타일 적용하기

<--기본형-->
요소1 = 요소2

-같은 부모를 가진 형제 요소 중 첫 번째 동생 요소에만 스타일 적용
-요소1 과 요소2 는 같은 레벨 이면서 요소1 이후 맨 먼저 오는 요소2에 스타일을 적용

형제 선택자 = 형제 요소에 스타일 적용하기

<--기본형-->
요소1 ~ 요소2

-형제 요소들에 스타일 적용
-인접 형제 선택자와 다른 점은 모든 형제 요소에 다 적용된다는 것

속성 선택자

[속성] 선택자 = 지정한 속성에 스타일 적용하기

<--기본형-->
[속성]

-지정한 속성을 가진 요소를 찾아 스타일 적용

[속성 = 값] 선택자 = 특정 값을 갖는 속성에 스타일 적용하기

<--기본형-->
[속성 = 값]

-주어진 속성과 속성 값이 일치하는 요소를 찾아 스타일 적용

[속성 ~= 값] 선택자 = 여러 값 중 특정 값이 포함된 속성에 스타일 적용하기

<--기본형-->
[속성 ~= 값]

-여러 속성 값 중에 해당 값이 포함되어 있는 요소를 찾아 스타일 적용

[속성 |= 값] 선택자 = 특정 값이 포함된 속성에 스타일 적용하기

<--기본형-->
[속성 = 값]

-특정 값이 포힘된 속성을 가진 요소를 찾아 스타일 적용 하이픈으로 연결해 한 단어 값을이루는 요소에도 적용

[속성 ^= 값] 선택자 = 특정 값으로 시작하는 속성에 스타일 적용하기

<--기본형-->
[속성 ^= 값]

-특정 값으로 시작하는 속성을 가진 요소를 찾아 스타일 적용

[속성 $= 값] 선택자 = 특정 값으로 끝나는 속성에 스타일 적용하기

<--기본형-->
[속성 $= 값]

-특정 값으로 끝나는 속성을 가진 요소를 찾아 스타일 적용

[속성 *= 값] 선택자 = 값의 일부가 일치하는 속성에 스타일 적용하기

<--기본형-->
[속성 *= 값]

-특정 값이 포힘된 속성을 가진 요소를 찾아 스타일 적용 하이픈으로 연결해 한 단어 값을이루는 요소에도 적용

0개의 댓글