반응형
1. 결합자란? |
css를 작성할 때 각 태그의 선택자를 통해 css를 적용해 줄 수 있다. 이때 하나의 선택자가 아닌 선택자와 선택자를 결합하여 좀 더 세밀하게 css를 적용해줄 수도 있다.
2. 결합자의 종류 |
1) 자손 결합자
어떠한 태그의 자식 태그의 자식 태그의 스타일 속성을 지정해주고 싶을 때 사용한다.
선택자와 선택자 사이에 띄어쓰기를 통해 css를 적용할 수 있다.
2) 자식 결합자
어떠한 태그의 바로 직계 자식 태그의 스타일 속성을 지정해주고 싶을 때 사용한다.
선택자와 선택자 사이에 ' > ' 기호를 사용하여 css를 적용할 수 있다.
3) 뒤따르는 형제 결합자
같은 선상에 있는 형제 태그들이 있을 때 특정한 태그 뒤에 오는 모든 형제 태그들의 스타일 속성을 지정해주고 싶을 때 사용한다. 선택자와 선택자 사이에 ' ~ ' 기호를 사용하여 css를 적용할 수 있다.
4) 뒤따르는 바로 다음 형제 결합자
같은 선상에 있는 형제 태그들이 있을 때 특정한 태그 뒤에 오는 바로 다음 형제 태그의 스타일 속성을 지정해주고 싶을 때 사용한다. 선택자와 선택자 사이에 ' + ' 기호를 사용하여 css를 적용할 수 있다.
<예제>
See the Pen Untitled by proccm (@proccm) on CodePen.
3. 가상 클래스 :not |
가상 클래스 :not은 선택자의 css 적용시 특정한 요소는 스타일이 적용되지 않게 할 때 사용된다.
형태: 선택자:not(제외할 선택자)
<예제>
반응형
'css' 카테고리의 다른 글
CSS 탐구생활 : text관련 스타일 속성들 (0) | 2023.02.14 |
---|---|
CSS 탐구생활 : 요소 변형하기(transform) (0) | 2022.07.31 |
CSS 탐구생활 : :first-child 와 :last-child 그리고 :nth-child( ) (0) | 2022.07.21 |
CSS 탐구생활 : 마우스 커서를 올렸을 때 효과 나타내기( :hover) (0) | 2022.07.17 |
CSS 탐구생활 : 미디어 쿼리 사용하기 (0) | 2022.07.12 |