728x90
CSS 선택자
@2024.03.28
캐스케이딩(우선 순위)
같은 요소가 여러 개 선언된 경우, 우선 적용하는 순위를 알아보자.
💡
인라인 방식(1000) > ID 선택자(100) > Class 선택자(10) > Tag 선택자(1) > * 선택자(0)
- 점수가 가장 높은 선언이 우선 적용
- 만약 점수가 같다면, 가장 마지막에 해석된 선언이 우선 적용
전체 선택자(*)
페이지에 있는 전체 요소를 대상으로 삼아 스타일 적용
* {
/* 모든 요소에 대한 스타일 */
margin : 0;
padding : 0;
}- 간단한 테스트로는 괜찮으나, 많이 사용하면 브라우저에 과부하가 걸리기 때문에, 사용하지 않는 것이 좋다.
- *를 자식 선택자에도 사용 가능하다
- #container * {} → container div의 자식 요소 전체를 대상으로 적용
요소 선택자(Type Selector)
/* 태그에 따라 한 페이지에 있는 모든 요소를 대상으로 적용 */
p {
/* 모든 <p> 요소에 대한 스타일 */
}- ex) ul 태그를 대상으로 적용한다면 → ul{ }
아이디 선택자(#idname)
/* id를 대상으로 삼아 스타일을 적용 */
#header {
/* id="header"를 갖는 요소에 대한 스타일 */
}- 유일한 요소에만 스타일을 적용하기 때문에 유연성이 없고, 재활용이 어렵다.
클래스 선택자(.classname)
/* 클래스를 대상으로 삼아 스타일을 적용 */
.container {
/* class="container"를 갖는 모든 요소에 대한 스타일 */
}- id와 다르게 여러 개의 요소를 대상으로 정할 수 있다.
- 스타일을 한 그룹의 요소에 적용할 때는 class를 사용
하위 선택자(Descendant Selector)
/* 특정 요소의 하위 요소중 특정한 요소를 선택 */
div p {
/* <div> 요소 내의 모든 <p> 요소에 대한 스타일 */
}- 선택자를 이용해 더 상세히 작업할 때 사용
속성 선택자(attributes selector)
/* 특정 속성을 갖는 요소를 선택 */
[href] {
/* href 속성을 갖는 모든 요소에 대한 스타일 */
}
a[title] {
/* title 속성을 갖는 <a> 요소에 대한 스타일 */
}
[type="button"] {
/* type="button" 속성을 갖는 요소에 대한 스타일 */
}
a[href="http://net.tutsplus.com"] {
/* "http://net.tutsplus.com"로 연결된 모든 <a> 요소에 대한 스타일 */
}
a[href*="naver"] {
/* naver가 있는 연결된 <a> 요소에 대한 스타일 */
}
a[href^="http"] {
/* 속성 앞의 값이 특정 값으로 시작하는 <a> 요소에 대한 스타일 */
}
a[href$=".jpg"] {
/* 속성 앞의 값이 특정 값으로 끝나는 <a> 요소에 대한 스타일 */
}자식 선택자(Child Selector)
/* 특정 요소의 직계 자식 요소를 선택 */
ul > li {
/* <ul> 요소의 직계 자식인 모든 <li> 요소에 대한 스타일 */
}- x y 와 x>y의 차이점은 후자가 직계 자식만 선택한다는 것 (손자 선택 안 함)
인접 형제 선택자(Adjacent Sibling Selector)
/* 특정 요소의 다음에 나오는 형제 요소를 선택 */
h2 + p {
/* <h2> 요소 다음에 나오는 첫번째 <p> 요소에 대한 스타일 */
}<h2>인접 형제 선택자</h2>
<p>Paragraph 1</p><p>Paragraph 2</p>
- p 태그 중 위에 첫 번째 p 태그만 적용되고, 두 번째는 적용 안됨
일반 형제 선택자 (General Sibling Selector)
/* 특정 요소의 형제 요소 중 모든 다음에 나오는 요소를 선택 */
h2 ~ p {
/* <h2> 요소 다음에 나오는 모든 <p> 요소에 대한 스타일 */
}- 인접 형제 선택자는 앞의 선택자 바로 뒤에 오는 첫 번째 요소만 선택하나,
일반 형제 선택자는 앞에 선택자 아래에 있는 모든 뒤에 요소를 선택
가상 클래스 선택자(Pseudo-class Selector)
/* 특정 상태나 조건에 따라 요소를 선택 */
a:hover {
/* 마우스가 요소 위에 있을 때의 <a> 요소에 대한 스타일 */
}
a:link {
/* 하이퍼링크(anchor)가 아직 방문되지 않은 상태의 링크를 스타일링 */
}
a:visted {
/* 클릭했었거나 방문했던 페이지에 있는 <a> 요소에 대한 스타일 */
}
/* 체크박스가 체크되었을 때의 스타일 */
input:checked {
/* 스타일 */
}가상 요소 선택자(Psedo-element Selector)
/* 특정 요소의 특정 부분을 선택 */
p::first-line {
/* <p> 요소의 첫 번째 줄에 대한 스타일 */
}
p::first-letter {
/* <p> 요소의 첫 단락의 첫글자에 대한 스타일 */
}부정 선택자(Not Selector)
/* 특정 선택자를 제외한 모든 요소를 선택 */
:not(.highlight) {
/* highlight 클래스를 갖지 않은 모든 요소에 대한 스타일 */
}
div:not(.highlight) {
/* 모든 div중에서 highlight 클래스를 갖지 않은 모든 요소에 대한 스타일 */
}선택자 결합(Combination of Selectors)
/* 여러 선택자를 결합하여 특정 요소를 더 정확하게 선택 */
.container p {
/* class="container"를 갖는 요소 내의 모든 <p> 요소에 대한 스타일 */
}N번째 자식 요소 선택자
/* div의 2번째 자식 요소에 대한 스타일 */
div:nth-child(2) {
/* 스타일 */
}
/* div의 4번쨰마다 자식 요소에 대한 스타일 */
div:nth-child(4n) {
/* 스타일 */
}
/* ul의 끝에서 3번째 자식 요소에 대한 스타일 */
ul:nth-last-child(3) {
/* 스타일 */
}- nth-child는 변숫값을 정수로 받으며 0으로 시작하지 않는다.
- 자식 요소의 변수 집합을 선택하는데도 이 방법을 사용 가능하다.
N번째 타입 요소 선택자
/* p 타입 중 2번째 요소에 대한 스타일 */
p:nth-of-type(2) {
/* 스타일 */
}
/* div 타입 중 끝에서 2번째 요소에 대한 스타일 */
div:nth-last-of-type(2) {
/* 스타일 */
}첫/끝 자식 요소 선택자
/* 첫 번째 li 요소에 대한 스타일 */
li:first-child {
/* 스타일 */
}
/* li 요소 중 마지막 자식 요소에 대한 스타일 */
li:last-child {
/* 스타일 */
}- 부모 요소의 첫 번째/마지막 자식만 대상으로 삼는다.
- 목록에서 맨 처음과 맨 마지막 항목에서 테두리 선을 제거하는데 이 방식을 흔히 사용
단일 자식 요소 선택자
/* span 요소 중 부모 안에 자식으로 하나만 있는 경우에 대한 스타일 */
span:only-child {
/* 스타일 */
}단일 타입 요소 선택자
/* p 타입 중 부모 안에서 하나만 있는 경우에 대한 스타일 */
p:only-of-type {
/* 스타일 */
}- 부모 컨테이너에 형제 요소가 없는 요소를 대상으로 스타일 지정
첫 번째 타입 요소 선택자
/* div 타입 중 첫 번째 요소에 대한 스타일 */
div:first-of-type {
/* 스타일 */
}- 해당 요소의 첫 번째 형제 선택자 선택
가상 요소 앞/뒤
/* 모든 <p> 요소의 내용 앞에 생성된 가상 요소에 대한 스타일 */
p::before {
/* 스타일 */
}
/* 모든 <div> 요소의 내용 뒤에 생성된 가상 요소에 대한 스타일 */
div::after {
/* 스타일 */
}
728x90
