가상 요소 선택자
HTML 문서에 명시적으로 작성된 구성 요소는 아니지만, 마치 존재하는 것처럼 취급해 선택하는 선택자 지정 방법을 말함
:: 를 붙여서 사용하며, 기준 선택자와 함께 사용(생략 시 전체 선택자)
기준 선택자 :: 가상 요소 선택자 { CSS 코드 }| 종류 | 설명 |
|---|---|
| :: before | 콘텐츠 앞의 공간을 선택 |
| :: after | 콘텐츠 뒤의 공간을 선택 |
<style>
p::before{
content:'<before>';
}
p::after{
content:'<after>';
}
</style>
<p> Lorem, ipsm dolor </p>
content 속성은 CSS 속성중 하나로, 새로운 콘텐츠를 생성 시 사용
-> content 밑에 color:red 처럼 css 속성 사용 가능
가상 클래스 선택자 사용하기
요소의 상태를 이용해 선택자를 지정하는 방법
기준 요소 : 가상 클래스 선택자 {css 코드}링크 가상 클래스 선택자
링크 가상 클래스 선택자는 a 태그에서 발생할 수 있는 링크 상태를 이용해 선택하는 방법
| 종류 | 설명 |
|---|---|
| :link | 한번도 방문하지 않은 링크일 때 선택 |
| :visited | 한 번이라도 방문한 적이 있는 링크일 때 선택 |
<style>
a:link{ /* 한번도 방문한 적이 없는 링크 */
color:orange;
}
a:visited{ /* 한번이라도 방문한 적이 있는 링크 */
color:green;
}
</style>한번도 방문한 적 없는 링크 -> 주황색
한번 이상 방문 -> 초록색 링크
동적 가상 클래스 선택자
사용자의 어떤 행동에 따라 동적으로 변하는 상태를 이용해 선택자를 지정하는 방법
| 종류 | 설명 |
|---|---|
| :hover | 요소에 마우스를 올리면 해당 태그가 선택자로 지정됨 |
| :active | 요소를 마우스로 클릭하고 있는 동안 해당 태그가 선택자로 지정 |
<style>
p:hover{
color:red;
}
</style> 위 경우 요소에 마우스를 올렸을 때 콘텐츠의 텍스트가 빨간색이 됨
입력 요소 가상 클래스 선택자
입력 요소의 특정 상태를 이용해 선택자로 지정하는 방법
| 종류 | 설명 |
|---|---|
| :focus | 입력 요소에 커서가 활성화 되면 선택자로 지정 |
| :checked | 체크 박스가 표시되어 있으면 선택자로 지정 |
| :disabled | 상호 작용 요소가 비활성화 되면 선택자로 지정 |
| :focus | 상호 작용 요소가 활성화 되면 선택자로 지정 |
<style>
input:focus{
color:red;
}
</style><style>
input:checked + label{
color:red;
}
</style>
<!-- 체크 박스가 선택되어 있으면 인접 형제 요소인 label 태그의 텍스트에 빨간 색 --><style>
input:disabled,
button:disabled{
background-color:#ccc
}
</style>
<input type="text" disabled>
<button disabled> 버튼 </button>
<!-- 입력 요소의 배경색에 회색 적용 -->위의 ,는 그룹화
<style>
input:enabled,
button:enabled{
background-color:#ccc
}
</style>
<input type="text">
<button> 버튼 </button>
구조적 가상 클래스 선택자
HTML 태그의 사용 위치, 다른 태그와의 관계에 따라 요소를 선택하는 방법
| 종류 | 설명 |
|---|---|
| E:first-child | E 요소의 첫번째 자식 요소를 선택자로 지정 |
| E:last-child | E 요소의 마지막 자식 요소를 선택자로 지정 |
| E:nth-child(n) | E 요소의 부모 요소의 자식 요소 중 n번째 순서가 맞으면 선택 |
| E:nth-last-child(n) | E 요소의 부모 요소의 자식 중 마지막 n번째 순서가 맞다면 선택 |
| E:nth-of-type(n) | 부모 요소의 자식 요소 중 n번째로 등장하는 E요소 선택 |
| E:nth-last-of-type(n) | 부모 요소의 자식 요소 중 마지막에서 n번째로 등장하는 e요소 선택 |
| E:first-of-type | 부모 요소의 자식 요소 중 첫번째로 등장하는 E요소 선택 |
| E:last-of-type | 부모 요소의 자식 요소 중 마지막으로 등장하는 E요소 선택 |
<style>
li:first-child{
color:red;
}
li:last-child{
color:red;
}
</style>
<!-- li 태그의 자식 요소 중 첫번째와 마지막 요소 선택 --><style>
p:nth-child(1){
color:red;
}
</style>
<body>
<p> lorem 0</p> // 부모인 body 태그의 첫번째 요소이므로 스타일 적용
<div>
<p> lorem 1</p> // 부모인 div 태그의 첫번째 요소이므로 스타일 적용
<p> lorem 2</p>
</div>
<div>
<p> lorem 3</p> // 부모인 div 태그의 첫번째 자식 요소이므로 스타일 적용
<p> lorem 4</p>
</div>
</body>nth-last-child도 로직 동일
<style>
p:nth-of-type(2){
color:red;
}
</style>
<body>
<p> lorem 0 </p>
<div>
<p> lorem 1 </p>
<span> span 1 </span>
<p> lorem 2 </p> // 부모인 div 태그의 자식 요소 중 두번째 p 태그에 스타일 적용
</div>
<div>
<p> lorem 3</p>
<span> span 2 </span>
<span> span 3 </span>
<p> lorem 4</p> // 부모인 div 태그의 자식 요소 중 두번째 p 태그에 스타일 적용
</div>
</body>nst-last-of-type(n) 선택자도 로직 동일
<style>
p:first-of-type{
color:red;
}
</style>
<body>
<span> span 0 </span>
<p> lorem 0 </p> // 부모인 body 태그의 자식 중 첫번째 p 태그에 스타일 적용
<div>
<span> span 1</span>
<p> lorem 1</p> // 부모인 div 태그의 자식 중 첫번째 p 태그의 스타일 적용
<p> lorem 2</p>
</div>
<span> span 2 </span>
<span> span 3 </span>
<p> lorem 3 </p>
<p> lorem 4 </p>
</body> 
Journey for Backend Developer