선택자 (Selector)
CSS3 선택자 (Selector)
- 선택자는 코드 내 요소를 선별하고 CSS 속성을 적용하는 데 사용되는 표현식으로 몇가지 기본 선택자들이 존재한다.
- 선택자는 전체선택자, 타입선택자, 클래스선택자, 아이디선택자, 속성선택자가 있고 가상 선택자가 존재한다
1. 전체선택자
- 전체 선택자는 말 그대로 스타일을 HTML 코드 전역으로 적용하고자 할 때 사용할 수 있는 선택자이다.
- 사용 방법은 간단하다. 코드 내부 *{속성 선언} 형태의 코드를 <style>에 적거나 외부에서 불러오면 된다.
<style>
*{
color: black;
font-size: medium;
}
</style>
2. 타입선택자
- 타입 선택자는 앞서 나왔던 인라인 스타일 시트와 유사한 방식으로 사용할 수 있다.
- 다만 <style> 태그 내에 적어야 한다는 점은 명심해야 한다.
- 타입 선택자를 사용시 해당하는 HTML태그에 모두 같은 스타일을 적용시킨다
- 적용은 해당 태그의 이름을 적어서 적용한다
<style>
h5 {
color: aquamarine;
font-family: 'Noto Sans KR', sans-serif;
font-size: 20px;
}
</style>
<body>
<h5>타입 선택자는 사용한 태그 이름을 그대로 사용</h5>
</body>
3.클래스선택자
- 클래스 선택자는 type 선택자와 다르게 태그들에 클래스 이름을 부여해 스타일을 적용시킬 수 있다.
- 만약 같은 클래스에 묶은 서로 다른 태그를 다른 스타일을 적용하고 싶다면 태그 + 클래스 이름 형태로 구분하여 스타일을 별도로 적용시킬 수 있다.
- 적용은 해당 태그의 아이디에 . 을 붙여서 적용한다
<style>
.class1 {
color: bisque;
font-family: 'Noto Sans KR', sans-serif;
}
h1.class1{
color: red;
}
</style>
<body>
<p class="class1">클래스 선택자는 id랑 뭐가 다른걸까...</p>
<h1 class="class1">그러게 말이다</h1>
</body>
4. 아이디선택자
- id 선택자의 경우 클래스 선택자와 유사하지만 다른점이 있다면 여러개의 태그에 같은 선택자로 선택이 불가능하다는 점
- 즉 명시적으로 특정 태그에만 스타일을 적용해야 한다면 사용해야 한다
- 무엇보다 스타일 적용에 우선순위가 id 선택자의 순위가 더 높기 때문에 중요도가 높은 요소에 적용해야 한다
- 적용은 해당 태그의 아이디에 #을 붙여서 적용한다
<style>
#backpain{
color: seagreen;
font-family: 'Noto Sans KR', sans-serif;
}
</style>
<body>
<h1 id="backpain"> id 선택자는 이런식으로 선택자 이름을 정할 수 있다! </h1>
<h2 id="backpain"> 이렇게 다른 태그에도 같은 이름으로 id선택자를 사용할 순 없다! </h2>
</body>
5.속성선택자
- 속성 선택자 같은 경우에는 조금 더 복잡할 수 있는데 간단히 보자면 특정 태그를 사용하고 있는 것 중에 내가 적용해야하는 특수한 속성을 찾아 선택해 스타일을 적용시킬 수 있는 선택자다.
- 예를 들어 <a> 태그 중 href 속성이 "google.com" 라면 a[href="google.com"] { color : blue} 이런식으로 적용한다
- 적용은 해당 태그 이름의 속성을 붙여서 적용한다
<style>
p[text]{
color: red;
}
p[text="attr2"]{
color: yellow;
}
</style>
<body>
<p text="attr1">속성 선택자</p>
<p text="attr2">속성 선택자</p>
</body>
6. 가상선택자
- 가상 선택자는 요소가 특정 상태에 있거나 특정 구조적 조건을 만족할 때 스타일을 적용할 수 있는 선택자다
- 문서가 로드되었을 때 바로 보이는 스타일이 아니라 특정 조건을 만족하면 적용된 스타일이 나타난다
- 예를 들어 마우스를 링크에 갖다 대거나, 해당 요소가 리스트의 3번째 <li>일 때 스타일이 적용되는 것이다
이벤트 가상 클래스 선택자
- 사용자가 마우스 이벤트 행위를 어떻게 하는지에 따라 스타일이 다르게 적용된다
| 사용 방법 (a태그 기준) | 설명 |
| a : link {color : blue;} | 웹 문서에서 사용자가 방문하지 않았던 곳을 표시 |
| a : visited {color : blue;} | 링크를 이미 방문했다면 스타일 적용 |
| a : active {color : blue;} | 링크를 클릭하는 순간 스타일 적용 |
| a : hover {color : blue;} | 마우스 포인터를 갖다 대는 순간 스타일 적용 |
| a : focus {color : blue;} | 해당 요소에 초점이 맞춰졌을 때 적용 (탭 키로 눌려보면 알 수 있다) |
이벤트 가상 클래스 선택자
- 요소가 특정 구조적 조건을 만족하면 스타일이 적용이 된다
- 예를 들어 클래스 명이 container 안에 있는 2번 째 <ul>태그라면 .container > ul:nth-of-type(2){}가 되는 것이다
- first면 첫 번 째, last면 마지막이고 수열이라면 last가 붙으면 뒤에서 부터 선택한다는 의미다
| 사용 방법 (ul-li태그 기준) | 설명 |
| li:nth-child(2) | li:nth-last-child(2) | 부모 요소의 두 번째 자식인 li 요소 선택 |
| li:nth-of-type(2) | li:nth-last-of-type(2) | 부모 요소 내에서 두 번째 li 요소 선택 |
| li:first-child | li:last-child | 부모 요소 내에서 첫 번째 li 선택 |
| li:first-of-type | li:last-of-type | 부모 요소의 첫 번째 자식인 li 요소 선택 |
| li:only-child | 부모 요소 내에서 유일한 자식인 li 요소 선택 |
| li:only-of-type | 부모 요소 내에서 유일한 li 요소 선택 |
7. 조합 선택자
- 기존의 선택자들을 조합해서 특정 조건을 만족할 때 스타일을 적용시킨다
- 비교연산자나 +, ~와 같은 기호를 이용해 적용할 요소를 선택한다
- 자손이나 후손 등의 개념이 등장하는데 쉽게 생각해서 A안에 있는 B는 자손이자 후손, B안의 C는 A의 자손x 후손o
- 즉 A안에 있는 요소 모두가 후손이지만 직계 자손인 B만이 A의 자손인 것이다
| 구분 | 조합 방법 | 설명 |
| 후손 선택자 | 선택자 A 선택자 B | 선택자 B가 선택자 A에 반드시 포함되있을 때 선택 |
| 자손 선택자 | 선택자 A > 선택자 B | A의 직계 자식 B를 선택하여 스타일 적용 |
| 인접 형제 선택자 | 선택자 A + 선택자 B | 형제 요소들 중 바로 다음에 인접한 형제 요소를 선택하여 스타일 적용 |
| 일반 형제 선택자 | 선택자 A ~ 선택자 B | 형제 요소들 중 하나(B)를 선택하여 스타일 적용 |
| 그룹 선택자 | 선택자 A, 선택자 B | A와 B 모두 선택하여 스타일 적용 |
예시 코드
<body>
<div class="container">
<h1>Heading</h1>
<p>First paragraph (adjacent to h1).</p>
<p>Second paragraph (general sibling).</p>
<span>Example span</span>
</div>
</body>
<style>
/* 후손 선택자: .container 안의 모든 p */
.container p {
color: blue;
}
/* 자손 선택자: .container 바로 아래의 h1 */
.container > h1 {
font-size: 24px;
}
/* 인접 형제 선택자: h1 바로 다음에 오는 p */
h1 + p {
font-weight: bold;
}
/* 일반 형제 선택자: h1 이후의 모든 형제 p */
h1 ~ p {
background-color: lightgray;
}
/* 그룹 선택자: h1과 모든 span에 같은 스타일 적용 */
h1, span {
text-transform: uppercase;
}
</style>
'웹프로그래밍 > CSS 3' 카테고리의 다른 글
| CSS - Background와 Transition (0) | 2024.08.06 |
|---|---|
| CSS - 레이아웃 속성과 flex (0) | 2024.08.05 |
| CSS - 폰트 설정 (0) | 2024.07.31 |
| CSS - 박스 모델 (0) | 2024.07.30 |
| CSS - 기본 사용법 (0) | 2024.07.26 |