가상 선택자 ( Pseudo Selectors )
가상선택자(pseudo selectors)는 CSS에서 요소의 특정 상태나 위치에 따라 스타일을 지정하는 데 사용되는 선택자입니다. 가상선택자는 실제로 HTML 문서에 직접적으로 존재하지 않는 특정 조건에 부합하는 요소를 선택할 수 있게 해줍니다. 이러한 선택자는 콜론(:)으로 시작하며, 특정 상황에 맞는 요소를 선택할 수 있도록 도와줍니다.
1. 가상 클래스 (Pseudo-classes): 가상 클래스는 HTML 문서의 특정 상태를 선택하는데 사용되며, 주로 사용자 상호작용이나 요소의 특정 상태에 따라 스타일을 변경할 때 활용됩니다.
-
표기법: 콜론 하나(:)로 시작합니다.
-
용도 및 예시:
- :hover: 마우스가 요소 위에 올라가 있는 동안의 상태를 선택합니다.
- :active: 사용자가 요소를 클릭하고 있는 동안의 상태를 선택합니다.
- :focus: 입력 요소나 링크 등이 포커스를 받은 상태를 선택합니다.
https://velog.io/@yunn75151/HTMLCSS-Transitions 참고
2. 가상 요소 (Pseudo-elements): 가상 요소는 HTML 문서의 특정 부분을 선택하여 스타일을 적용하는데 사용됩니다. 가상 요소는 요소 자체에 존재하지 않는 부분에 스타일을 추가하거나 선택할 때 활용됩니다.
- 표기법: 콜론 두 개(::)로 시작합니다.
- 용도 및 예시:
- ::before: 선택한 요소의 내용(content) 앞에 가상의 요소를 생성합니다.
- ::after: 선택한 요소의 내용(content) 뒤에 가상의 요소를 생성합니다.
예시
p::before {
content: "→ "; /* 문단 앞에 화살표 추가 */
}
사용빈도 top10 가상요소
- ::before (요소 앞에)
- ::after (요소 뒤에)
- ::first-line (첫 번째 줄)
- ::first-letter (첫 번째 글자)
- ::selection (선택된 텍스트)
- ::placeholder (입력 요소의 플레이스홀더)
- ::before (리스트 아이템 앞에)
- ::after (리스트 아이템 뒤에)
- ::nth-child (n번째 자식)
- ::before (버튼 앞에)
1. div들 중 마지막 div 선택후 css적용
<head>
div:last-child {
background-color: teal;
}
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
2. div들 중 첫번째 div 선택후 css적용
<head>
div:first-child {
background-color: tomato;
}
div:last-child {
background-color: teal;
}
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
3. 두번째 span이 배경색으로 green을 가지게 하기
<html>
<head>
<style>
span{
background-color: tomato;
}
span:nth-child(2) {
background-color: teal;
}
</style>
</head>
<body>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
</body>
</html>
3. 짝수번째 span에 css 적용
<html>
<head>
<style>
span{
background-color: tomato;
}
span:nth-child(even) {
background-color: teal;
}
</style>
</head>
<body>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
</body>
</html>
4. 홀수번째 span에 css 적용
<html>
<head>
<style>
span{
background-color: tomato;
}
span:nth-child(odd) {
background-color: teal;
}
</style>
</head>
<body>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
</body>
</html>
5. 특정 규칙 지정해서 span에 css 적용
<html>
<head>
<style>
span{
background-color: tomato;
}
span:nth-child(3n + 1) {
background-color: teal;
}
</style>
</head>
<body>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
</body>
</html>
6. p 안에서 span찾기 (부모에서 자식 찾기)
<html>
<head>
<style>
span{
color: tomato;
}
p span {
color: teal;
}
</style>
</head>
<body>
<span>hello</span>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quod commodi et sequi ipsam odio dolorem. <span>inside</span>
</p>
</body>
</html>
7.p 안에서 span찾기 (부모의 바로 밑 자식의 관계)
<html>
<head>
<style>
span{
color: tomato;
}
p > span {
color: teal;
}
</style>
</head>
<body>
<span>hello</span>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quod commodi et sequi ipsam odio dolorem. <span>inside</span>
</p>
</body>
</html>8.p의 형제 span찾기(바로 뒤에 오는 형제)
<html>
<head>
<style>
span{
color: tomato;
}
p + span {
text-decoration: underline;
}
</style>
</head>
<body>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quod commodi et sequi ipsam odio dolorem. <span>inside</span>
</p>
<span>hello</span>
</div>
</body>
</html>
9.p의 형제 span 찾기(바로뒤에 올 필요 없음)
<html>
<head>
<style>
span{
color: tomato;
}
p ~ span {
text-decoration: underline;
}
</style>
</head>
<body>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quod commodi et sequi ipsam odio dolorem. <span>inside</span>
</p>
<span>hello</span>
</div>
</body>
</html>10.특정 상태의 태그 찾기 ( 상태가 required인 input찾기 )
<!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>
input:required {
border: 1px solid tomato;
}
</style>
</head>
<body>
<div>
<form>
<input type="text" placeholder="username" />
<input type="password" required placeholder="password" />
</form>
</div>
</body>
</html>
특성 선택자 ( Attribute selectors )
(출처: https://wallel.com/)
특성 선택자(Attribute selectors)는 CSS에서 특정 HTML 요소를 선택할 때 요소의 특성(attribute)을 기반으로 선택하는 방법을 제공합니다. 이 선택자를 사용하면 특정 속성이나 특성 값이 있는 요소를 선택할 수 있습니다.
1. [attribute] a태그에 target이라는 속성을 가진 요소를 선택
a[target] { color: red; }
2. [attribute=”value”] a태그에 target=”_blank”라는 속성을 가진 요소를 선택. ( target이 반드시 _blank인 요소만 잡음 )
a[target="_blank"] { color: red; }
2-2. type 속성이 password인 것 선택
<head>
<style>
input:required {
border: 1px solid tomato;
}
input[type="password"] {
background-color: thistle;
}
</style>
</head>
<body>
<div>
<form>
<input type="text" placeholder="username" />
<input type="password" required placeholder="password" />
</form>
</div>
</body>
3. [attribute~=”value”] apple이라는 class를 가진 요소를 선택. ( 여러개의 class가 함께 지정되어 있어도, apple을 가졌다면 선택 )
class~="apple"] { background-color: red; }
3-2. placeholder에 name이 들어간 것 선택하기
<head>
<style>
input:required {
border: 1px solid tomato;
}
input[placeholder~="name"] {
background-color: thistle;
}
</style>
</head>
<body>
<div>
<form>
<input type="text" placeholder="user name" />
<input type="password" required placeholder="password" />
</form>
</div>
</body>
4. [attribute|=”value”] layer라는 class로 시작하는 요소만 선택하되, 하이픈으로 구분해 더 많은, 더 다양한 요소를 선택할 수 있음.
div[class|="layer"] { background-color: red; }
5. [attribute^=value] minions라는 class로 시작하는 요소를 전부 선택한다.
div[class^="minions"] { background-color: red; }
6. [attribute$=value] end라는 class로 끝나는 요소를 선택. ( .pdf등을 값(value)으로 지정해 특정 파일만 선택하는 것도 가능 )
div[class$="end"] { background-color: red; }
7. [attribute*=value] wow라는 class를 가진 모든 요소를 선택 ( class가 어떻게 조합이 되어도 wow만 완성되면 무조건 선택 )
div[class*="wow"] { background-color: red; }
개발 일지 블로그