[CSS] 특정한 속성을 가진 요소들을 선택 : 속성 선택자

WEB/CSS

[CSS] 특정한 속성을 가진 요소들을 선택 : 속성 선택자

developer of the night sky 2023. 9. 26. 15:47

🔻속성 선택자🔻

특정한 속성을 가진 요소들을 선택하기 위해 사용된다.

1. 선택자[속성명]

2. 선택자[속성명=값]

3. 선택자[속성명^=값]

4. 선택자[속성명$=값]

5. 선택자[속성명*=값]

[공통 HTML]

<body>
    
    <div class="list">
        <a href="http://naver.com" target="_self">네이버</a>
        <a href="http://yes24.com" target="_blank" title="링크">예스24</a>
        <a href="https://daum.net">다음</a>
        <a href="https://11st.co.kr">11번가</a>
        <a href="https://coupang.com" target="_blank">쿠팡</a>
    </div>

</body>

1. 선택자[속성명]

    <style>
        a[target] {
            color: red;
        }

    </style>

target 속성 설정된 요소만 스타일 적용된다.

2. 선택자[속성명=값]

    <style>

        .list a {
            color: black;
            text-decoration: none;
            display: block;
            margin-bottom: 5px;
        }
        
        a[target="_blank"] {
            color: red;
        }
    </style>

target= "_blank"인 요소만 스타일 적용된다.

3. 선택자[속성명^=값]

    <style>

        a[href^="http://"] {
            color: red;
        }
    </style>

href가 http://로 시작하는 요소만 스타일 적용된다.

4. 선택자[속성명$=값]

    <style>
        
        a[href$='.com'] {
            color: red;
        }

    </style>

href가 .com으로 끝나는 요소만 스타일 적용된다.

5. 선택자[속성명*=값]

    <style>
    
        a[href*=co] {
            color: red;
        } 

    </style>

href에서 co가 들어간 요소만 스타일 적용된다.

🔻디자인에 적용하기🔻

1. 필수 입력 필드 강조하기

<body>
    
    <div id="list">
        <input type="text" value="1" required>
        <input type="text" value="2" readonly>
        <input type="text" value="3" readonly> 
        <input type="text" value="4">
        <input type="text" value="5" required>
        <input type="text" value="6" disabled>
        <input type="text" value="7">
        <input type="text" value="6" disabled>
        <input type="text" value="8" >
        <input type="text" value="9">
        <input type="text" value="10" required>

    </div>
    <hr>

    <input type="button" value="버튼">


</body>

    <style>
        input[type=text] {
            display: block;
            margin-bottom: 3px;
            border: 1px solid #555;
            background-color: #fff;
            padding: 3px;
            outline: none;
            color: #333;
        }

        input[type=text]:required {
            background-color: gold;
        }

        input[type=text]:optional {
            background-color: #ccc;
        }


    </style>

2. 입력하지 않는 필드와 입력하는 필드 구분하기(1)

    <style>
        input[type=text] {
            display: block;
            margin-bottom: 3px;
            border: 1px solid #555;
            background-color: #fff;
            padding: 3px;
            outline: none;
            color: #333;
        }
        input[type=text]:disabled {
            background-color: #999;
        }

        /* readonly도 enabled에 속한다 */
        input[type=text]:enabled {
            background-color: gold;
        }



    </style>

3. 입력하지 않는 필드와 입력하는 필드 구분하기(2)

    <style>
        input[type=text]:read-only {
            background-color: gold;
        }

        input[type=text]:read-write {
            background-color: #ccc;
        }

    </style>

4. 입력 필드 속성에 따라 마우스 포인터 바꾸기

    <style>
        input[type=text]:read-only {
            background-color: gold;
        }

        input[type=text]:read-only {
            cursor: not-allowed;
        }

    </style>

🔻체크박스, 라디오, 셀렉트 css 적용하기🔻

체크박스, 라디오, 셀렉트는 css 적용이 잘 안된다.

    <div>
        <input type="checkbox" class="cb">
        <input type="checkbox" class="cb">
        <input type="checkbox" class="cb">
    </div>

<style>
        .cb {
            border: 1px solid red;
            width: 100px;
            height: 100px;
            background-color: gold;
        }

    </style>

크기만 적용되었다.

1. checked + opacity

    <style>
        .cb {
            /* 불투명도(0~1)*/
            opacity: 0.2;
        }

        .cb:checked {
            opacity: 1;
        }

    </style>

2. checked + visibility

<style>
        #cat {
            visibility: visible;
        }

        #cd-cat:checked + #cat {
            visibility: hidden;
        }

    </style>

저작자표시