CSS

속성 선택자

컴맹숙 2022. 11. 16. 14:06

1. 특정 속성이 있는 요소 선택 [속성]

<style>
        ul {list-style:none;}
        li {width:120px;  display:inline-block;  margin:10px;}
        li a {
            padding:5px 20px;
            font-size:14px;
            text-decoration: none;
            font-weight: bold;
        }
        a[href] { /*a태그 중 href 속성이 있는 요소만 스타일 적용*/
            background:yellow;
            border:1px solid black;
            font-weight:normal;
        }
    </style>

<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>

[속성]

 

2. 특정 속성값이 있는 요소 선택 [속성 = 속성값]

<style>
        ul {list-style:none;}
        li {padding:5px 30px;}
        li a {font-size:16px;  text-decoration: none;  color:black;}
        a[target="_blank"] { /*target의 속성값이 _blank인 요소에만 스타일 적용*/
            padding-right:30px;
            background:url(images/newwindow.png) no-repeat center right;
        }
    </style>
    
    <body>
    <ul>
        <li><a href="https://www.naver.com/" target="_blank">네이버</a></li>
        <li><a href="https://www.axzcorp.com/page/">카카오</a></li>
        <li><a href="https://www.daum.net/" target="_blank">다음</a></li>
    </ul>
</body>

[속성 = 속성값]

 

3. 여러 값 중 특정 속성값이 포함된 요소 선택 [속성 ~= 값]

속성이 하나면서 속성값이 여러 개일 때 특정 속성값을 찾는 데 편리하다.

<style>
        ul {list-style:none;}
        li {display:inline-block;margin:20px;}
        li a {
            padding:5px 20px;
            font-size:14px;
            color:blue;
            text-decoration: none;
        }
        .flat {
            background:pink;
            border:1px solid skyblue;
        }
        a[class~="button"] { /*속성값이 정확히 button이 포함된 요소에만 스타일 적용*/
            box-shadow: rgba(0,0,0,0.4) 4px 4px;
            border-radius: 5px;
            border:solid 1px skyblue;
        }
    </style>
    
    <body>
    <ul>
        <li><a href="#" class="flat">메뉴 1</a></li>
        <li><a href="#" class="buttons">메뉴 2</a></li> <!--스타일 적용 x-->
        <li><a href="#" class="button">메뉴 3</a></li>
        <li><a href="#" class="flat button">메뉴 4</a></li>
    </ul>
</body>

[속성 ~= 값]

 

4. 특정 속성값이 포함된 요소 선택 [속성 |= 값]

<style>
        ul {list-style:none;}
        li {display:inline-block; margin:20px;}
        li a {
            padding:5px 30px;
            text-decoration: none;
            font-size:15px;
        }
        a[title|=us] { /*속성값이 정확히 us이거나 us-로 시작하는 요소에 스타일 적용 */
            background:url('images/us.png') no-repeat left center;
        }
        a[title|=jap] { /*속성값이 정확히 jap이거나 jap-로 시작하는 요소에 스타일 적용 */
            background: url('images/jp.png') no-repeat left center;
        }
        a[title|=chn] { /*속성값이 정확히 chn이거나 chn-로 시작하는 요소에 스타일 적용 */
            background:url('images/ch.png') no-repeat left center;
        }
    </style>

<body>
    <ul>
        <li>외국어 서비스 : </li>
        <li><a href="#" title="us-english">영어</a></li>
        <li><a href="#" title="ja">일본어</a></li> <!--스타일 적용 x-->
        <li><a href="#" title="chn">중국어</a></li>
    </ul>
</body>

 

5. 특정 속성값으로 시작하는 요소 [속성 ^= 값]

<style>
        ul {list-style: none;}
        li {display: inline-block; margin:20px;}
        li a {
            text-decoration: none;
            padding:5px 20px;
            font-size:20px;
        }
        a[title^="eng"] { /*eng으로 시작하는 요소에만 스타일 적용*/
            background:url('images/us.png') no-repeat left center;
            padding:5px 20px;
        }
        a[title^="jap"] { /*jap으로 시작하는 요소에만 스타일 적용*/
            background:url('images/jp.png') no-repeat left center;
            padding:5px 20px;
        }
        a[title^="chin"] { /*chin으로 시작하는 요소에만 스타일 적용*/
            background:url('images/ch.png') no-repeat left center;
            padding:5px 20px;
        }
    </style>
    
    <body>
    <ul>
        <li>외국어 서비스 : </li>
        <li><a href="#" title="english">영어</a></li>
        <li><a href="#" title="japanese">일본어</a></li>
        <li><a href="#" title="chinese">중국어</a></li>
    </ul>
</body>

[속성 ^= 값]

 

6. 특정 속성값으로 끝나는 요소 선택 [속성 $= 값]

<style>
        ul {list-style-type: square;}
        li {margin:10px;}
        li a {text-decoration: none;}
        a[href$="hwp"] { /*href의 속성값이 hwp로 끝나는 요소에만 스타일 적용*/
            background: url('images/hwp_icon.gif') no-repeat right center;
            padding-right:25px;
        }
        a[href$="xls"] { /*href의 속성값이 xls로 끝나는 요소에만 스타일 적용*/
            background:url('images/excel_icon.gif') no-repeat right center;
            padding-right:25px;
        }
    </style>
    
    <body>
    <h3>인트로 파일</h3>
    <ul>
        <li><a href="intro.hwp" >hwp 파일</a></li>
        <li><a href="intro.xls">엑셀 파일</a></li>
    </ul>
</body>

[속성 $= 값]

7. 일부 속성값이 포함되는 요소 선택 [속성 *= 값]

<style>
        ul {list-style-type:circle;}
        li {padding-left:20px; line-height:3em;}
        li a {text-decoration: none; color:black;}
        a[href*=na] { /*href 속성에 na가 포함된 요소에만 스타일 적용*/
            background-color: pink;
            color:white;
        }
    </style>
    
  <body>
    <ul>
        <li><a href="https://www.axzcorp.com/page/">카카오</a></li>
        <li><a href="https://www.daum.net/">다음</a></li>
        <li><a href="https://www.naver.com/">네이버</a></li>
    </ul>
</body>

[속성 *= 값]

 

 

 

 

 

더보기

Do it! HTML+CSS+자바스크립트 웹 표준의 정석 교재를 참고하여 작성했다.

저작자표시 (새창열림)

'CSS' 카테고리의 다른 글

가상 클래스 (2)  (0) 2022.11.18
가상 클래스 (1)  (0) 2022.11.18
연결 선택자  (0) 2022.11.16
배경 이미지 지정하기  (0) 2022.11.15
웹 요소의 위치 지정하기  (0) 2022.11.15

'CSS'의 다른글

  • 현재글속성 선택자

관련글

댓글

티스토리툴바