The parts of a CSS rule
CSS는 다음과 같이 작성한다.
선택자는 어떤 element에게 해당 설정을 부여할지를 정해주는 역할을 한다.
Simple selectors
- Universal selector(*, wildcard): 모든 요소에 적용된다.
- Type selector(태그명): HTML element에 적용된다.
- Class selector(.클래스명): class 속성으로 해당 클래스명을 가진 element에 적용된다.
- ID selector(#아이디): id 속성으로 해당 아이디를 가진 element에 적용된다.
- Attribute selector([속성명="값"], [속성명]): 해당 속성을 가진 element에 적용된다.
Grouping selectors
쉼표(,)를 이용해 여러 선택자들을 한 번에 묶어서 사용할 수 있다.
strong,
em,
.my-class,
[lang] {
color: red;
}
Pseudo-classes and pseudo-elements
마우스를 올리는 등 특정한 상태일 때, 요소의 일부에게만 스타일을 지정해줄 수도 있다.
Pseudo-classes
마우스를 올렸을 때나, 짝수 번째 요소만 선택할 때 등 실제 class 속성값을 갖지는 않지만 특정 상태인 요소들을 선택할 수 있다.
/* Our link is hovered */
a:hover {
outline: 1px dotted green;
}
/* Sets all even paragraphs to have a different background */
p:nth-child(even) {
background: floralwhite;
}
Pseudo-element
HTML에는 없는 element를 CSS를 이용해 삽입하는 것이다. 콜론 두 개(::)를 이용해 나타낸다.(오래된 브라우저를 위해 콜론 하나를 이용해 나타내기도 한다.)
.my-element::before {
content: 'Prefix - ';
}해당 element 앞에 Prefix - 문자열을 삽입한다.
- ::marker - list의 각 bullet point 혹은 number를 꾸며줄 때 사용할 수 있다.
- ::selection - 사용자에 의해 하이라이트된 부분을 꾸며줄 때 사용할 수 있다.
Complex selectors
- Descendant combinator( ): 공백(space)을 이용해 자식 관계에 있는 요소를 선택한다.
- Next sibling combinator(+): 더하기 기호(+)를 이용해 형제(?) 관계(자식이 아닌, 같은 레벨의 다음 차례)의 바로 다음 요소를 선택한다. 요소 사이에 margin을 넣어줄 때 등의 경우 사용될 수 있다.
- Subsequent-sibling combinator(~): 물결 기호(~)를 이용해 형제 관계의 다음 요소들을 모두 선택한다.
- Child combinator(>): 부등호 중 (>)를 이용해 직접 자식 관계인 요소를 선택한다. descendant combinator는 상속되는 반면, child combinator는 상속되지 않으므로 더 정확한 선택 및 스타일 적용이 가능하다.
Compound selectors
여러 선택자를 같이 사용해 더 정확하게 원하는 요소를 선택하고 스타일을 적용할 수 있다.
a.my-class {
color: red;
}type selector와 class selector를 함께 사용한 코드이다.
내용, 코드, 사진 출처: https://web.dev/learn/css/selectors
