속성 선택자

CSS 속성 선택자 , CSS 선택자

CSS 속성 선택자

자식 선택자 q > img { ... }

  • 직계 자식만 포함, 손주는 포함 하지 않는다.

예시

<head>
  <style type="text/css">
    body > blockquote {
      color: #4c6a77;
    }
    p > img {
      ...;
    }
    ul#subNav > li {
      ...;
    }
  </style>
</head>

속성 선택자 div [id] { ... }

  • *[] { ... } : *요소가 [] 속성값을 가지고 있다면.

  • 연속해서 사용 가능 [], [] 두 가지 속성을 모두 갖고 있다.

  • [] 앞에는 생략 가능

div [id] { ... } ex)
<div id="anywayID">
  ... p [class="note"] { ... } ex)
  <p class="note">
    ... abbr [title~="mobile"] { ... } ex)
    <abbr title="Mobile Device"
      >... img [ait|="love"] { ... } ex) <img alt="love-you" scr="love.jpg" />

      <!------------------------------>
      area [shape][title] { ... }

      <area shape="" coords="" href="" />
      <area shape="" coords="" href="" title=""
    /></abbr>
  </p>
</div>

고급 속성 선택자

  • <^>: 해당 문자로 시작하는 것을 찾는다.

  • <$>: 해당 문자로 끝나는 것을 찾는다

  • <*>: 어디에 있던지 문자를 포함하고 있는 것을 모두 찾는다.

  • 예시

a [href^="http://"] ex)
<a href="http://naver.com/"
  >... a [href$=".psd"] ex)
  <a href="./data/displayBody.psd"
    >... abbr [title*="css"] ex)
    <img alt="htmlcssjavascript" scr="love.jpg" /></a
></a>
Previous심플 선택자Next가상 클래스 선택자

Last updated

Was this helpful?