안녕하세요, 코린이의 코딩 학습기 채니 입니다.
개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다.
가상 클래스 (pseudo-class) 선택자
HTML 코드
<!-- div>(p>lorem)*2 -->
<div>
<p id="clickme">
<a href="https://chanychu.tistory.com/">Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse nisi suscipit iste minima reprehenderit sapiente.</a>
A voluptas rem mollitia, optio quidem beatae, assumenda iste, quo dolorem vero temporibus est repudiandae?</p>
<p id="hoverme">Culpa unde ullam temporibus magnam tempore expedita! Maxime hic omnis ut fugit asperiores obcaecati, perferendis consequuntur esse a eum exercitationem porro molestiae enim accusantium dignissimos veritatis ex quibusdam illo beatae.</p>
<p id="mylink">
<a href="https://chanychu.tistory.com/">Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse nisi suscipit iste minima reprehenderit sapiente.</a>
A voluptas rem mollitia, optio quidem beatae, assumenda iste, quo dolorem vero temporibus est repudiandae?</p>
</div>
:active
- 클릭하면 style 적용
<style>
/* 가상 클래스 (pseudo-class) 선택자 */
#clickme:active {
background-color: lightseagreen;
color: white;
}
</style>
clickme의 id값을 가진 문장을 클릭하니 style이 적용 되었습니다.
:hover
- 마우스를 올리면 style 적용
<style>
#hoverme:hover {
background-color: lightsalmon;
color: white;
}
</style>
hoverme의 id값을 가진 문장에 마우스를 올리니 style이 적용 되었습니다.
:link - 방문 전
:visited - 방문 후
<style>
#mylink a {text-decoration: none;}
#mylink a:link {color: aqua;}
#mylink a:hover {color: olivedrab; text-decoration: underline;}
#mylink a:visited {color:violet;}
#mylink a:active {color: yellow;}
</style>
HTML 코드
<div class="wrapper">
<input type="text" name="nickname" id="nickname">
<br>
<input type="checkbox" name="fruit" id="apple">
<label for="apple">사과</label>
<input type="checkbox" name="fruit" id="pear">
<label for="pear">배</label>
<input type="checkbox" name="fruit" id="peach">
<label for="peach">복숭아</label>
</div>
:focus - 입력 받을 수 있는 상태가 되었을 때
: checked - 체크박스가 선택 되었을 때
<style>
[name=nickname] {
outline: none;
border-top: none;
border-right: none;
border-left: none;
border-bottom: 1px solid black;
}
[name=nickname]:focus {
border-bottom: 3px solid black;
}
[name=fruit]:checked {
width: 50px;
height: 50px;
}
[name=fruit]:checked + label {
font-size: 50px;
}
</style>
[name=fruit]:checked + label를 이용해서 체크박스가 선택되면 label(글자)의 크기도 같이 조정되도록 하였습니다.
input에서 'outline:none;'을 하지 않으면 브라우저에서 기본적으로 제공되는 outline이 적용되므로 위처럼 클릭 시 border-bottom만 선이 굵게 적용하고 싶다면 outline:none을 반드시 설정해줘야 합니다.
위치 관련 가상클래스 선택자
HTML 코드
<!-- div#container>p{CSS$}*5 -->
<div id="container">
<p>CSS1</p>
<p>CSS2</p>
<p>CSS3</p>
<p>CSS4</p>
<p>CSS5</p>
<pre>CSS6</pre>
</div>
:first-child
<style>
/* 위치관련 가상 클래스 선택자 */
#container :first-child {
color:lime;
}
</style>
:last-child
<style>
#container :last-child {
color: lime;
}
</style>
혼합
<style>
#container :first-child, #container :last-child {
color: lime;
}
</style>
#container :first-child, :last-child는 불가하니, 유의!
<style>
/* 마지막 자식 요소에서 p타입을 찾는데, 마지막 요소가 pre이므로 적용 안됨 */
#container p:last-child {
color: red;
}
</style>
#container의 마지막 자식 요소에서 <p> 태그를 찾는데, 마지막 자식 요소가 <pre>이므로 찾을 수가 없어서 적용 불가하여 style 적용이 안된 것을 확인할 수 있습니다.
:nth-child() - 함수 형태의 선택자
<style>
/* 1-based index */
#container :nth-child(2) {
color: aqua;
}
</style>
두 번째 인자에 대하여 style 적용이 된 것을 확인할 수 있습니다.
짝/홀수 표현
:nth-child(2n) / :nth-child(2n+1)
<style>
/* 짝/홀수 표현 n의 배수로도 처리 가능 */
/* 홀수는 2n+1 */
#container :nth-child(2n) {
color: aqua;
}
</style>
짝수 인자에 대해서 style이 적용 된 것을 확인할 수 있으며, 홀수 처리를 원한다면 (2n+1)을 해줍니다.
위치, 타입 관련 가상 클래스 선택자
:first-of-type
<style>
/* 위치, 타입 관련 가상 클래스 선택자 */
#container p:first-of-type {
color: orangered;
}
container에서 <p> 태그 중의 첫 번째 인자에 style을 적용하였습니다.
:last-of-type
<style>
/* 위치, 타입 관련 가상 클래스 선택자 */
#container p:last-of-type {
color: orangered;
}
</style>
container에서 <p> 태그 중의 마지막 인자에 style을 적용하였습니다.
혼합
<style>
/* 위치, 타입 관련 가상 클래스 선택자 */
#container p:first-of-type, #container p:last-of-type {
color: orangered;
}
</style>
:nth-of-type(2n)
<style>
#container p:nth-of-type(2n) {
color:orange
}
</style>
container에서 <p> 태그의 짝수 인자들만 style이 적용되어 CSS6은 <pre>태그이므로 적용 안되는 것을 확인할 수 있습니다.
부정 선택자
HTML 코드
<!-- div.box>p{안녕$}*5 -->
<div class="box">
<p>안녕1</p>
<p>안녕2</p>
<p>안녕3</p>
<p>안녕4</p>
<p>안녕5</p>
</div>
:not(selector)
<style>
/* 부정 선택자 */
/* :not(selector) */
.box :not(:nth-of-type(4)) {
background-color: coral;
color: white;
}
</style>
box클래스에서 4번째 인자가 아닌 인자들에게 style을 적용했으므로 '안녕4'를 제외한 인자들에게 style 적용 되었습니다.
루트 선택자 (최상위 선택자)
- 단독으로 사용, HTML을 가리킴
HTML 코드
<!-- div.box>p{안녕$}*5 -->
<div class="box">
<p>안녕1</p>
<p>안녕2</p>
<p>안녕3</p>
<p>안녕4</p>
<p>안녕5</p>
</div>
:root
<style>
:root {
color: purple;
}
</style>
style 적용된 인자들을 제외한 모든 인자들의 color가 변경 된 것을 확인할 수 있습니다.
최상위 선택자인 HTML을 가리키므로 HTML의 모든 인자들에게 style 적용을 하는 선택자 입니다.
가상요소 (pesudo-element) 선택자
HTML 코드
<div id="articles">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p>Perferendis est accusamus minima repudiandae nesciunt, nostrum quae expedita tenetur incidunt assumenda molestias maiores exercitationem rerum quasi accusantium dolorem doloribus.</p>
<p>Fuga qui nostrum cupiditate similique optio voluptas quaerat quam necessitatibus fugiat sequi ipsum odit voluptatum dolore rem dolor ab commodi harum assumenda atque inventore, nemo enim beatae magni exercitationem.</p>
</div>
::selection
- 블럭 잡는 곳
<style>
/* 가상요소 (pesudo-element) 선택자 */
#articles ::selection {
background-color: hotpink;
color: white;
}
</style>
블럭 잡은 곳만 style이 지정 되는 것을 확인할 수 있습니다.
::first-letter
- 첫번째 글자에 대해
<style>
#articles ::first-letter {
font-size: 2em;
}
</style>
첫 번째 글자에 대하여 style이 적용 된 것을 확인할 수 있습니다.
::before
- 실제 자식 요소 앞에서 생성되는 CSS 요소
content
- 가짜 속성, HTML 문서에 정보로 포함되지 않은 요소를 CSS에서 새롭게 생성
<style>
#articles p::before {
content: '🎈';
}
</style>
::after
- 실제 자식 요소 뒤에서 생성되는 CSS 요소
<style>
#articles p::before {
content: '🎈';
}
#articles p::after {
content : '🎁'
}
</style>
※ ::before, ::after에 대한 참고 포스팅
[공유]::before와::after, 그들의 정체는?
[공유]::before와::after, 그들의 정체는? 안녕하세요! UI개발2팀 조가영입니다. 무려 10주에 걸쳐 진행한 OJT. 면수습 후 OJT의 꽃인 블로깅을 작성하려니 감회가 더욱 새롭네요! 과제를 하던 중 발견한
blog.hivelab.co.kr
'CSS > CSS' 카테고리의 다른 글
| CSS) inline 요소, block 요소 정렬 (text-align, margin, margin-left) (0) | 2022.05.16 |
|---|---|
| CSS) 텍스트 관련 (text-decoration, color, text-shadow) (0) | 2022.05.15 |
| CSS) 폰트 관련 (폰트 적용 방법, font-family, font, 폰트 사이즈) (0) | 2022.05.15 |
| CSS) 선택자 우선 순위 (0) | 2022.05.13 |
| CSS) 스타일 기본 형식, HTML문서 적용 방법, 선택자(1) (0) | 2022.05.13 |
