[CSS] 선택자(Selector) - 의사요소선택자, 구조선택자, 부정선택자
- Etc
- 2020. 2. 24. 21:37
의사요소선택자
<html>
<head>
<style>
h1:before{
content:'재밌는 ';
color:red;
}
h1:after{
content:' 선택자탐구 ';
color:blue;
}
</style>
</head>
<body>
<h1>의사요소 선택자</h1>
</body>
</html><h1>의사요소 선택자</h1> 에서 <h1>은 시작태그, </h1>은 종료태그, 그 안에 "의사요소 선택자"라는 글씨는 content입니다. :before라는 의사요소선택자는 이 content 앞에 줄 수 있는 스타일입니다. 이는 글씨로 보여질 뿐 html상으로 글씨가 아니고 CSS상 스타일이기 때문에 마우스로 드래그해도 선택이 되지 않습니다.
주의할 점은 :(콜론)으로 된 것들은 붙여서 써야 합니다. 띄어서 쓰면 제대로 나타나지 않을 것입니다.
<html>
<head>
<style>
h1:before{
content:' ';
display:inline-block;
width:15px
height:15px;
background-color:red;
margin-right:20px;
}
</style>
</head>
<body>
<h1>의사요소 선택자</h1>
</body>
</html>그렇다면 이번에는 "재밌는" 이라는 글씨가 아닌 빨간 사각형을 넣어보고 싶다면, content:' ' 이렇게 놓고(따옴표를 넣는 이유는 content라는 공간을 일단 만들어야 하기 때문입니다. 단지 content내용에 글씨만 넣지 않았을 뿐)
이런 before와 after 를 이용해서 굉장히 다양한 모양을 만들어낼 수 있는 중요한 선택자입니다.
구조선택자
<html>
<head>
<style>
li:first-child{
text-decoration:underline;
}
</style>
</head>
<body>
<h1>의사요소 선택자</h1>
<ul>
<li>메뉴1</li> -------------- 첫째
<li>메뉴2</li> -------------- 둘째
<li>메뉴3</li> -------------- 셋째
<li>메뉴4</li> -------------- 넷째
</ul>
</body>
</html>리스트 태그 중 첫번째 리스트에만 스타일을 주고 싶다면, :first-child 선택자를 사용하면 됩니다. : (콜론표시)가 나오면 반드시 붙여서 써야 합니다. 정리해보면 ul태그의 자식들 중 첫째에만 스타일을 주고 싶을 때 사용하는 스타일 선택자가 바로 :first-child 선택자입니다.
첫째는 ---> :firstchild{ }
막내는 ---> :last-child{ }
둘째는 ---> :nth-child(2){ }
셋째는 ---> :nth-child(3){ }
이런식으로 적용됩니다.
짝수번째마다 지정 ---> :nth-child(2n){ }
홀수번째마다 지정 ---> :nth-child(2n+1){ }
(n에 0부터 들어갈 수 있다고 생각하면 됩니다.)
첫번째부터 세번째까지 지정 ---> :nth-child(-n+3){ }
네번째 이상 ---> :nth-child(n+4){ }
부정선택자
<html>
<head>
<style>
h1{
color:black;
}
:not(h1){
color:red;
}
</style>
</head>
<body>
<h1>의사요소 선택자</h1>
<ul>
<li>메뉴1</li> -------------- 첫째
<li>메뉴2</li> -------------- 둘째
<li>메뉴3</li> -------------- 셋째
<li>메뉴4</li> -------------- 넷째
</ul>
</body>
</html>부정선택자는 특정 부분 빼고 나머지는 모두 같은 스타일을 적용할 때 사용하는 선택자입니다. 위 예시에서 h1을 뺀 나머지는 모두 색상을 빨간색으로 바꿔야 할 경우 :not(h1){ } 의 스타일을 적용하시면 됩니다.
'Etc' 카테고리의 다른 글
| [애드센스 승인] 티스토리 애드센스 신청에서 승인까지의 과정 (14) | 2020.03.05 |
|---|---|
| [애드센스 승인] 티스토리 애드센스 승인 후기(무한반복신청) (5) | 2020.03.05 |
| [CSS] display속성 - block과 inline (0) | 2020.02.25 |
| [CSS] 선택자(Selector) 우선순위 (0) | 2020.02.24 |
| [CSS] 선택자(Selector) - 속성선택자, 가상선택자 (0) | 2020.02.23 |
| [CSS] 선택자(Selector) - 자손, 자식, 인접형제선택자 / 그룹화 (0) | 2020.02.23 |
| [CSS] 선택자(Selector) - 태그, 전체, class, id선택자 (0) | 2020.02.23 |
| [CSS] 단위 - vm, vh, vmin, vmax (0) | 2020.02.23 |