다재다능한 CSS3 선택자

CSS 2023. 6. 22. 14:39

연결 선택자

하위 선택자

부모 요소에 포함된 모든 하위 요소에 스타일이 적용된다.

자식 선택자

자식 요소에 스타일을 적용하는 선택자

두 요소 사이에 ‘>(부등호)’를 표시해 부모 요소와 자식 요소를 구분

예제) 자식 요소만 적용

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* > : 자식 요소만 적용 */
        #container > ul{
            border: 1px dotted blue;
        }
    </style>
</head>
<body>
    <section id="container">
        <header>
            <h1>예약 방법 및 요금</h1>
        </header>
        <p>요안드라에 예약하려면?</p>
        <!-- 자식요소에 스타일 적용 -->
        <ul>
            <li>예약 방법
                <!-- 손자 요소에 스타일 적용 -->
                <ul>
                    <li>직접 통화</li>
                    <li>문자 남기기</li>
                </ul>
            </li>
            <li>
                요금
                <!-- 손자 요소에 스타일 적용 -->
                <ul>
                    <li>1인 : 40,000원</li>
                    <li>2인 : 60,000원</li>
                    <li>3인 : 80,000원</li>
                    <li>4인 : 100,000원</li>
                </ul>
            </li>
        </ul>
    </section>
</body>
</html>

인접 형제 선택자

같은 부모를 가진 형제 요소 중 첫 번째 동생 요소에만 스타일 적용 요소 1과 요소 2는 같은 레벨이면서 요소 1 이후 맨 먼저 오는 요소 2 에 스타일을 적용

형제 선택자

형제 요소들에 스타일 적용 인접 형제 선택자와 다른 점은 모든 형제 요소에 다 적용된다는 것

예제) 형제 선택자 (모든 형제 요소 다 적용) + (인접 형제 선택자 설명)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        /*  ,  : 전부 다 적용 */
        /* + : 첫째 동생만 적용 */
        /* ~ : 자신을 제외한 형제들 적용 */
        h1~ul{
            color: blue;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <section id="container">
            <h1>예약 방법 및 요금</h1>
            <ul>
                <li>직접 통화</li>
                <li>문자 남기기</li>
            </ul>
            <ul>
                <li>1인 : 40,000원</li>
                <li>2인 : 60,000원</li>
                <li>3인 : 80,000원</li>
                <li>4인 : 100,000원</li>
            </ul>
    </section>
</body>
</html>

속성 선택자

[속성] - 지정한 속성을 가진 요소를 찾아 스타일 적용

예제) 속성 선택자

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            list-style: none;
        }
        li{
            width: 120px;
            margin: 10px;
            display: inline-block;
        }
        li a{
            padding: 5px 20px;
            font-size: 14px;
            color: blue;
            text-decoration: none;
        }
        /* a 태그에 href 속성을 가진 부분에 적용 */
        a[href]{
            background: yellow;
        }
    </style>
</head>
<body>
    <ul>
        <li><a>메인 메뉴 :</a></li>
        <li><a href="#">메뉴 1</a></li>
        <li><a href="#">메뉴 2</a></li>
        <li><a href="#">메뉴 3</a></li>
        <li><a href="#">메뉴 4</a></li>
    </ul>
</body>
</html>

[속성 = 값 ] - 주어진 속성과 속성 값이 일치하는 요소를 찾아 스타일 적용

예제) 속성=값 선택자

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            list-style: none;
        }
        li{
            padding: 5px 30px;
        }
        li a{
            color: blue;
            text-decoration: none;
        }
        /* 속성이 target 이고, 속성값이 "_blank"인 경우 */
        a[target="_blank"]{
            background: url(images/newwindow.png) no-repeat center right;
            padding-right: 30px;
        }
    </style>
</head>
<body>
    <h1>HTML5 표준한 사이트</h1>
    <ul>
        <li><a href="http://www.w3c.org/TR/html" target="_blank">HTML</a></li>
        <li><a href="http://www.w3c.org/TR/selectors">CSS Selector Level 3</a></li>
        <li><a href="http://www.w3c.org/TR/css3-mediaqueries">미디어쿼리</a></li>
    </ul>
</body>
</html>

[속성~=값 ] - 특정값이 포함된 속성을 가진 요소를 찾아 스타일 적용

- 하이픈으로 연결해 한 단어 값을 이루는 요소에도 적용

예제) 속성~=값 선택자

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            list-style: none;
        }
        li{
            display: inline-block;
            margin: 10px;
        }
        li a{
            padding: 5px 20px;
            font-size: 14px;
            color: blue;
            text-decoration: none;
        }
        .flat{
            background: blue;
            color: white;
        }
        [class~="button"]{
            border: 2px solid black;
            box-shadow: rgba(0, 0, 0, 0.4) 5px 5px;
        }
    </style>
</head>
<body>
        <ul>
    <li><a href="#">메뉴 1</a></li>
    <li><a href="#">메뉴 2</a></li>
    <li><a href="#" class="button">메뉴 3</a></li>
    <li><a href="#" class="flat button">메뉴 4</a></li>
        </ul>
</body>
</html>

[속성 |= 값] - 특정 값이 포함된 속성을 가진 요소를 찾아 스타일 적용

예제) 속성 |= 값 선택자

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            list-style: none;
        }
        li{
            display: inline-block;
            margin: 10px;
        }
        li a{
            font-size: 14px;
            color: blue;
            text-decoration: none;
        }
        /* |= : 해당 단어와 하이픈 연결된 것만 적용 */
        /* 단어 일부나 스페이스는 안됨 */
        a[title |="us"]{
            background: url(images/us.png) no-repeat left center;
            padding: 5px 25px;
        }
        /* 단어 일부나 스페이스는 안됨 */
        /* a[title |="jap"]{ */
        a[title |="japanese"]{
            background: url(images/jp.png) no-repeat left center;
            padding: 5px 25px;
        }
    </style>
</head>
<body>
    <ul>
        <li>외국어 서비스 :</li>
        <!-- title : 마우스 올렸을 때 제목 표시 -->
        <li><a href="#" title="us">영어</a></li>
        <li><a href="#" title="us-english">영어</a></li>
        <li><a href="#" title="japanese">일본어</a></li>
    </ul>
</body>
</html>

[속성^=값]

예제) 속성^= 선택자

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            list-style: none;
        }
        li{
            display: inline-block;
            margin: 10px;
        }
        li a{
            font-size: 14px;
            color: blue;
            text-decoration: none;
        }
        /* ^= : 해당 단어가 시작하는 것만 적용 */
        a[title ^="us"]{
            background: url(images/us.png) no-repeat left center;
            padding: 5px 25px;
        }
        /* a[title |="japanese"]{ */
            /* ^= : 해당 단어가 시작하는 것만 적용 */
        a[title ^="jap"]{
            background: url(images/jp.png) no-repeat left center;
            padding: 5px 25px;
        }
        a[title ^="chin"]{
            background: url(images/ch.png) no-repeat left center;
            padding: 5px 25px;
        }
    </style>
</head>
<body>
    <ul>
        <li>외국어 서비스 :</li>
        <!-- title : 마우스 올렸을 때 제목 표시 -->
        <li><a href="#" title="us">영어</a></li>
        <!-- 아래 3개는 적용됨 -->
        <!-- <li><a href="#" title="us-english">영어</a></li> -->
        <!-- <li><a href="#" title="usenglish">영어</a></li> -->
        <!-- <li><a href="#" title="us english">영어</a></li> -->
        <!-- 아래 2개는 안됨 -->
        <!-- <li><a href="#" title="englishus">영어</a></li> -->
        <li><a href="#" title="english us">영어</a></li>
        <li><a href="#" title="japanese">일본어</a></li>
        <li><a href="#" title="chinese">중국어</a></li>
    </ul>
</body>
</html>

[속성 $= 값]

속성 $= 값 선택자

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            list-style: square;
        }
        li a{
            line-height: 30px;
            font-size: 14px;
            color: blue;
            text-decoration: none;
        }
        /* $ : 끝나는 단어 */
        a[href $=hwp]{
            background: url(images/hwp_icon.gif) center right no-repeat;
            padding-right: 25px;
        }
        a[href $=xls]{
            background: url(images/excel_icon.gif) center right no-repeat;
            padding-right: 25px;
        }
    </style>
</head>
<body>
    <h3>회사 소개 파일 다운받기</h3>
    <ul>
        <li><a href="intro.hwp">hwp 파일</a></li>
        <li><a href="intro.xls">엑셀 파일</a></li>
        <li><a href="intro2.hwp">hwp 파일</a></li>
        <li><a href="intro2.hwp">hwp 파일</a></li>
    </ul>
</body>
</html>

[속성*=값]

속성*=값 선택자

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            list-style: circle;
        }
        li{
            padding: 5px 30px;
        }
        li a{
            text-decoration: none;
        }
        /* *= : 단어를 포함하는 곳에 적용 */
        [href *=w3]{
            background: blue;
            color: white
        }
    </style>
</head>
<body>
    <h1>HTML5 참고 사이트</h1>
    <p>(아래 링크 중 파란색 배경의 링크느 W3C 사이트로 연결됩니다.)</p>
    <ul>
        <li><a href="http://www.w3c.org/TB/html">HTML 표준안 사이트</a></li>
        <li><a href="http://www.w3 c.org/TB/html">HTML 표준안 사이트</a></li>
        <li><a href="http://www.w3-c.org/TB/html">HTML 표준안 사이트</a></li>
        <li><a href="w3-c.org/TB/html">HTML 표준안 사이트</a></li>
        <li><a href="-c.org/TB/htmlw3">HTML 표준안 사이트</a></li>
        <li><a href="http://www.webplatform.org">튜토리얼과 아티클</a></li>
        <li><a href="http://www.caniuse.com">HTML 지원 여부 체크</a></li>
        <li><a href="http://www.w3c.org/TB/css3-mediaqueries">미디어쿼리</a></li>
    </ul>
</body>
</html>

가상 클래스와 가상 요소

사용자 동작에 반응하는 가상 클래스

예제) :hover (메뉴라인에 hover)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            width: 960px;
            margin: 0 auto;
        }
        .navi{
            height: 60px;
            border-bottom: 2px solid #ccc;
        }
        .navi ul{
            list-style: none;
            padding-top: 10px;
        }
        .navi ul li{
            display: inline-block;
            width: 150px;
            padding: 10px;
        }
        .navi a:link, a:visited{
            font-size: 14px;
            padding: 10px;
            text-decoration: none;
        }
        /* 마우스 올렸을때 */
        /* 탭키로 이동할때 */
        .navi a:hover, 
        .navi a:focus{
            background-color: #222;
            color: #fff;
        }
        /* 마우스 클릭하고 있는 동안 적용 */
        .navi a:active{
            background-color: #f00;
        }
    </style>
</head>
<body>
    <div class="container">
        <nav class="navi">
            <ul>
                <li><a href="#">이용안내</a></li>
                <li><a href="#">객실소개</a></li>
                <li><a href="#">예약 방법 및 요금</a></li>
                <li><a href="#">예약하기</a></li>
            </ul>
        </nav>
    </div>
</body>
</html>

UI 요소 상태에 따른 가상 클래스

예제) cheked (radio 체크할때 파란색)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        form fieldset{
            margin-bottom: 25px;
        }
        form legend{
            font-size: 15px;
            font-weight: 600;
        }
        input:disabled{
            background: #ddd;
            border: 1px solid #ccc;
        }
        /* 체크할때 span 3개 중에서 첫번째 동생에 스타일 적용 */
        input:checked+span{
            color: blue;
        }
    </style>
</head>
<body>
    <form>
        <fieldset>
            <legend>사용자 정보</legend>
            <!-- disabled : 이름 못바꿈 -->
            <label>이름 <input type="text" disabled></label>
        </fieldset>
        <fieldset>
            <legend>신청 과목</legend>
            <p>이 달에 신청할 과목을 선택하세요</p>
            <label><input type="radio" name="subject"><span>회화</span></label>
            <label><input type="radio" name="subject"><span>문법</span></label>
            <label><input type="radio" name="subject"><span>작문</span></label>
        </fieldset>
    </form>
</body>
</html>

구조 가상 클래스

:root

문서 안의 루트 요소에 스타일을 적용

:nth-child(n) - 앞에서부터 n번재 자식 요소에 스타일 적용

:nth-last-child(n) - 뒤에서부터 n번째 자식 요소에 스타일 적용

예제)nth (표 홀수마다 적용 배경색 지정)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #container{
            text-align: center;
        }
        table{
            border: 1px solid #ccc;
            width: 200px;
            margin: 0 auto;
            border-collapse: collapse;
        }
        td{
            text-align: left;
            padding: 10px;
            padding-left: 20px;
        }
        /* 2n : 짝수에 적용 */
        /* 2n+1 : 홀수에 적용 */
        /* table tr:nth-child(2n){ */
        table tr:nth-child(2n+1){
            background: lightgray;
        }
    </style>
</head>
<body>
    <div id="container">
        <h1>건강에 좋은 건강 식품</h1>
        <table>
            <tr>
                <td>블루베리</td>
            </tr>
            <tr>
                <td>귀리</td>
            </tr>
            <tr>
                <td>토마토</td>
            </tr>
            <tr>
                <td>시금치</td>
            </tr>
            <tr>
                <td>적포도주</td>
            </tr>
            <tr>
                <td>견과류</td>
            </tr>
            <tr>
                <td>브로콜리</td>
            </tr>
            <tr>
                <td>연어</td>
            </tr>
            <tr>
                <td>마늘</td>
            </tr>
            <tr>
                <td>녹차</td>
            </tr>
        </table>
    </div>
</body>
</html>

:first-child - 첫번째 자식 요소스타일 적용

:last-child - 마지막 자식요소에 스타일 적용

예제):first-child, :last-child

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul.navi li{
            list-style: none;
            width: 8em;
            height: 1.6em;
            border: 1px #818181 solid;
            text-align: center;
            float: left;
        }
        ul.navi li a{
            text-decoration: none;
        }
        ul.navi li:hover{
            background: #333333;
        }
        /* > : 자식 요소만 스타일 적용(손자는제외) */
        ul.navi li:hover>a{
            color: #fff;
        }
        /* li 의 첫번째 항목 */
        ul.navi li:first-child{
            border-top-left-radius: 1em;
            border-bottom-left-radius: 1em;
        }
        /* li의 마지막 항목 */
        ul.navi li:last-child{
            border-top-right-radius: 1em;
            border-bottom-right-radius: 1em;
        }
    </style>
</head>
<body>
    <div>
        <ul class="navi">
            <li><a href="#">Home</a></li>
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS3</a></li>
            <li><a href="#">JQuery</a></li>
        </ul>
    </div>
</body>
</html>

그 외 가상 클래스

:taget - 앵커로 연결된부분 (목적지)에 스타일 지정

:not - 괄호 안에 있는 요소를 제외한 부분에 스타일 지정

예제) ::before ::after (요소 앞or뒤에 적용)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul li{
            margin: 15px;
        }

        /* 요소 앞에 내용이 추가 */
        /* li.hot::before{ */
            /* 요소 뒤에 내용이 추가 */
        li.hot::after{
            content: "NEW!!";
            font-size: x-small;
            padding: 2px 4px;
            margin: 0 10px;
            background: #f00;
            color: #fff;
        }
    </style>
</head>
<body>
    <div>
        <h1>제품 목록</h1>
        <ul>
            <li class="hot">제품 A</li>
            <li>제품 B</li>
            <li>제품 C</li>
            <li class="hot">제품 D</li>
        </ul>
    </div>
</body>
</html>

'CSS' 카테고리의 다른 글

트랜지션과 애니메이션 (0)	2023.06.22
CSS3와 애니메이션 (0)	2023.06.22
HTML5와 멀티미디어 (0)	2023.06.22
HTML5와 시맨틱 태그 (0)	2023.06.22
CSS 레이아웃 (0)	2023.06.22

ABOUT ME

림이의 개발일지 림이의 개발일지

'CSS' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'CSS' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바