CSS,속성 선택자를 알아보자.

속성선택자

지정된 속성 또는 value 에 의해 요소를 결정하여 스타일링 적용.

사실 쓰는 것은 자제 하는 것이 좋다.

모든 태그들을 검색해서 진행하기 때문에 로딩속도가 느리다는 단점이 있다.

 

[속성A]      

        /* id 속성을 가진 요소. */
        [id] {
            background-color: bisque;
        }

        /* input 태그 중 id 속성을 가진 요소. */
        input[id] {
            font-weight: bold;
        }

 

/* id 속성이 value 인 요소. */
        [id=lg] {                           /* Emmet 기능 적용시와 동일하게 value 에 문자열 구분자 생략 가능 */
            list-style: none;
        }

        /* value 가 디폴트로 설정된 값이 있다하더라도 명시적 지정이 되어 있지 않으면 미적용. */
        [target=_self] {
            text-decoration: none;
        }

        /* ol 태그 자손 요소중 href 속성을 가진 요소. */
        ol [href] {
            font-size: 25px;
        }

        /* href 속성과 target 속성을 가진 요소. */
        [href][target] {
            font-style: italic;
        }

 

 

^= 속성A
$=속성B
*=속성C

속성(또는 value) A부터 시작되는 특정 태그.

속성(또는 value) B로 끝나는 특정 태그.

속성(또는 value)C를 포함하는 특정태그.

        /* 지정된 value("font")로 시작되는 class 속성 값을 가진 요소. */
        [class^=font] {
            color: green;
        }

        /* 지정된 value("Size")로 끝나는 class 속성 값을 가진 요소. 매칭 시 대소문자를 구분함에 주의. */
        [class$=Size] {
            color: red;
        }

        /* 지정된 value("co.")가 포함되는 href 속성 값을 가진 요소. */
        [href*="co."] {                                                 /* value 에 특수문자 . 적용으로 문자열 구분자 생략 불가 */
            text-decoration: line-through;