selector
selector란 어느 element에 스타일을 적용할지를 지정한다
selector 중에서 combination 이라고 불리는 것
descendant selector (space) : 자손
child selector (>) : 자식
adjacent sibling selector (+) : 다음에 등장하는 인접 형제
general sibling selector (~) : 다음에 등장하는 모든 형제
* {
}
*=div {
}
*=p {
}
, {
}
#para {
}
span#para{
}
.c1{
}
span.c1 {
}
-div의 자손들 중에 모든 p
div p {
}
-div의 바로 자식인 모든 p
div > p{
}
-div 끝나고 바로 다음 인접 형제 p, 동생들 중 바로 다음 p
div + p {
}
-div 바로 다음에 오는 모든 형제 p
div ~ p {
}
* 띄어쓰기 주의!!
-class 값이 c1, c2 둘 다 가지고 있는 element
.c1 .c2 {
}
-class c1인 element들 중에서 c2를 가지고 있는 element, c1 안의 c2
.c1.c2 {
}
psedo-class
selector에서 psedo-class(슈도 클래스)란 element의 특정 상태(state), 특정 부분에 적용되는 것이다
ex) 마우스 올라간 상태, 링크 방문 여부, 포커스 상태 등
a:hover {
}
a:active {
}
a:unvisited link {
{
a:visited link {
}
a input:focues {
}
-demo 중에 첫째인 p
#demo p:first-child {
}
-demo 중에 둘째인 p
#demo p:nth-chied(2) {
}
#demo p::first-line {
}
#demo p::first-letter {
}
-h1 전에 이미지 삽입
#demo h1::before {
}
-드래그 했을 경우 (띄어쓰기 주의)
#demo ::selection {
}
!!적용!!
-마우스가 올라갔을때만 보여지게 하는 방법
attribute
#demo [class] {
}
-클래스가 my인 것만
#demo [class="my"] {
}
-클래스가 my 포함된 것 (공백으로 구분)
#demo [class~="my"] {
}
-클래스가 my 포함한 모든 것
#demo [class*="my"] {
}
-클래스가 my, my-로 시작하는 것
#demo [class|="my"] {
}
-클래스가 my로 시작하는 것
#demo [class^="my"] {
}
-클래스가 my로 끝나는 것
#demo [class$="my"] {
}
'programming > CSS' 카테고리의 다른 글
| [css_반응형] box-sizing (0) | 2022.08.19 |
|---|---|
| [css] animation (0) | 2022.08.19 |
| [css] inline, block (0) | 2022.08.19 |
| [css] float (0) | 2022.08.19 |
| [css] overflow (0) | 2022.08.18 |