선택자 관련 글
(1) 전체선택자, class선택자, id선택자, 태그선택자, 속성선택자
(2) 하위선택자, 자식선택자, 인접형제선택자, 형제선택
:target
가상선택자 중 하나로 target은 링크 태그(<a>)에 사용되어 최종 목적지의 CSS를 활성화시킬 수 있다. id를 사용하여 a태그와 요소를 연결한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
:target{
background-color: lightgreen;
color: white;
}
</style>
</head>
<body>
<a href="#link1">첫번째 링크</a>
<a href="#link2">두번째 링크</a>
<hr>
<div id="link1"><p>첫번째 선택 링크</p></div>
<div id="link2">두번째 선택 링크</div>
</body>
</html>
:not();
not셀렉터는 단독으로 사용할 수 있으며 특정 요소가 아닌 모든 요소를 선택할 때 사용된다. 전체 초기화를 한 다음에 not을 사용하여 속성이 변경되면 안되는 항목들에 대해 예외를 주는 방식으로 사용한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
color: black;
background-color: white;
font-style: normal;
}
:not(p){
color: lightskyblue;
}
:not(h2){
background-color: lightyellow;
}
:not(span){
font-style: italic;
}
</style>
</head>
<body>
<p>p태그입니다</p>
<h2>h2태그입니다</h2>
<p>p태그입니다</p>
<h2>h2태그입니다</h2>
<p>p태그입니다</p>
<span>span태그입니다</span>
</body>
</html>
'Frontend > CSS' 카테고리의 다른 글
| CSS: backface-visibility에 대해 알아보자 (0) | 2024.07.10 |
|---|---|
| CSS3로 동적 변화를 만들어보자 - 3. Animation (0) | 2024.07.08 |
| CSS3로 동적 변화를 만들어보자 - 2. Transition (0) | 2024.07.08 |
| CSS3로 동적 변화를 만들어보자 - 1. Transform (0) | 2024.07.08 |
| CSS의 선택자(selector) - 3. 가상 클래스 선택자(pseudo class)와 가상요소 선택자(pseudo element) (0) | 2024.07.07 |
| CSS의 선택자(selector) - 2. 속성선택자 (0) | 2024.07.07 |
| CSS의 선택자(selector) - 1. 하위선택자, 자식선택자, 인접선택자, 형제선택자 (0) | 2024.07.07 |
| CSS를 이용해 오디오와 비디오를 넣어보자 (0) | 2024.07.07 |