시간과 공간

CSS 가상선택자 연습하기 본문

css

CSS 가상선택자 연습하기

eh0000 2019. 7. 10. 00:51

CSS 가상선택자 연습하기

 

연습용 코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>가상선택자 연습하기</title>
    <style>
        h1:only-child{height:30px;color:#fff;font-size:16px;background:darkblue}
        em:only-child{display:block;height:30px;border:1px solid coral}

        p{height:30px;color:#fff;line-height:30px}
        p:nth-child(5n+1){background:skyblue}
        p:nth-child(5n+2){background:tomato}
        p:nth-child(5n+3){color:#000;background:yellow}
        p:nth-child(5n+4){color:#000;background:lightgray}
        p:nth-child(5n+5){background:green}
    </style>
</head>
<body>
<div>
    <h1>:only-child : 구조적 가상클래스로 어떤 요소의 자식이 하나 밖에 없을 때 적용 합니다.</h1>
</div>
<em>:only-child 일때 coral border</em>
<hr>
<div>
    <p>The 1 paragraph.</p>
    <p>The 2 paragraph.</p>
    <p>The 3 paragraph.</p>
    <p>The 4 paragraph.</p>
    <p>The 5 paragraph.</p>
    <p>The 1 paragraph.</p>
    <p>The 2 paragraph.</p>
    <p>The 3 paragraph.</p>
    <p>The 4 paragraph.</p>
    <p>The 5 paragraph.</p>
    <p>The 1 paragraph.</p>
    <p>The 2 paragraph.</p>
    <p>The 3 paragraph.</p>
    <p>The 4 paragraph.</p>
    <p>The 5 paragraph.</p>
    <p>The 1 paragraph.</p>
</div>
</body>
</html>

 

출력

 

'css' 카테고리의 다른 글

브라우저 크기에 맞게 동영상 사이즈 맞추기  (0) 2022.10.25
CSS 말줄임, 특수문자 줄 바꿈  (0) 2022.01.27
CSS 가상클래스에 대해 알아보자  (0) 2019.07.02
CSS 선택자 우선순위  (0) 2019.06.25
vertical-align , line-height 는 무엇인가...  (0) 2019.06.10
'css' Related Articles more
Comments