CSS_02_ 속성 선택자

hyeong taek jo·2023년 8월 13일

CSS Java html

HTML

목록 보기

9/10

📌 속성 선택자

태그 안에서 사용하는 속성들의 값 조건에 따라 다양한 스타일을 지정할 수 있다.

📌 1. [속성명]

HTML 속성명이 [속성명]인 요소를 선택자로 지정합니다. 예를 들어 속성명이 href인 요소를 선택자로 지정하려면 아래와 같이 작성합니다.

예제 1

 <style>
      [href] {
        color: red;
      }
    </style>
  </head>
  <body>
    <a href = "https://www.google.co.kr" target="_blank">구글</a>
  </body>

구글

-->

예제 2

 <style>
      h1[title] {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1 title = "apple">속성명 선택자</h1>
      <p title = "banana">속성명 선택자는 태그 요소와 같이 선택자로 사용할 수 있습니다.</p>
      <pre title = "tomato">속성명이 일치해도 태그가 일치하지 않는다면 선택되지 않습니다.</pre>
  </body>

속성명 선택자

속성명 선택자는 태그 요소와 같이 선택자로 사용할 수 있습니다.

속성명이 일치해도 태그가 일치하지 않는다면 선택되지 않습니다.

📌 2. [속성명 = “속성값”]

태그 요소와 무관하게 속성명과 속성값이 일치하는 요소는 모두 선택자로 지정됩니다.

    <style>
      [class = "tomato"] {
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <h1>[속성명 = "속성값"] 선택자</h1>
      <p class="tomato">속성명과 속성값이 모두 일치하는 요소를 선택자로 지정합니다.</p>
      <ul>
        <li class="tomato">태그와 무관하게 속성명과 속성값이 일치하면 선택됩니다.</li>
      </ul>
      <p class = "babaya">속성명이 일치해도 속성값이 다른 부분은 선택되지 않습니다.</p>
  </body>

[속성명 = "속성값"] 선택자

속성명과 속성값이 모두 일치하는 요소를 선택자로 지정합니다.

태그와 무관하게 속성명과 속성값이 일치하면 선택됩니다.

속성명이 일치해도 속성값이 다른 부분은 선택되지 않습니다.

--> 만일 p[class = "tomato"] 였으면 첫 문장만 변했을 것이다.

📌 3. [속성명 ~= “속성값”]

[속성명]이 일치할 때 특정 문자가 [속성값]에 들어간 경우 선택자로 지정하는 기능입니다.
[속성명 = "속성값"] 선택자와 [속성명 ~= "속성값"] 선택자의 차이점은 전자는 공백으로 작성된 합성어는 선택이 안된다는 점입니다. 하지만 후자는 공백으로 작성된 합성어는 선택이 가능합니다.
속성명이 title이고 속성값에 faker라는 단어가 포함된 독립 단어 또는 공백으로 띄어진 합성어를 찾을 경우 아래와 같이 작성합니다.

  <style>
      [title ~= "faker"] {
        color: blue;
      }
    </style>
  </head>
  <body>
    <p title = "faker">독립 단어는 적용됩니다.</p>
    <p title = "SKT1-faker">하이픈<code class="inlinecode">-</code> 합성어는 적용되지 않습니다.</p>
    <p title = "SKT1_faker">언더바<code class="inlinecode">_</code> 합성어는 적용되지 않습니다.</p>
    <p title = "faker SKT1">공백으로 작성된 합성어는 접두/접미사 상관없이 적용됩니다.</p>
    <p title = "SKT1 faker">공백으로 작성된 합성어는 접두/접미사 상관없이 적용됩니다.</p>
    <p title = "fakerSKT1">공백이 없는 합성어는 접두/접미 무관하게 적용되지 않습니다.</p>
    <p title = "SKT1faker">공백이 없는 합성어는 접두/접미 무관하게 적용되지 않습니다.</p>
  </body>

<style>
  [title ~= "faker"] {
    color: blue;
  }
</style>

독립 단어는 적용됩니다.

하이픈- 합성어는 적용되지 않습니다.

언더바_ 합성어는 적용되지 않습니다.

공백으로 작성된 합성어는 접두/접미사 상관없이 적용됩니다.

공백이 없는 합성어는 접두/접미 무관하게 적용되지 않습니다.

📌 4. [속성명 *= “속성값]

- 기호는 전체를 선택한다는 의미로 CSS의 전체 선택자 뿐만 아니라 MySQL 등 다양한 컴퓨터 언어에서 보편적으로 쓰입니다.
*= 기호를 사용하는 속성 선택자는 속성값이 공백으로 띄어져 있는 경우뿐만 아니라 하이픈-, 언더바_ 및 공백없이 이어진 단어 조합에도 적용됩니다.

독립 단어는 적용됩니다.

하이픈-도 적용됩니다.

언더바_도 적용됩니다.

공백으로 작성된 합성어도 접두/접미사 상관없이 적용됩니다.

공백으로 작성된 합성어도 접두/접미사 상관없이 적용됩니다.

공백이 없는 합성어도 접두/접미 무관하게 적용됩니다.

공백이 없는 합성어도 접두/접미 무관하게 적용됩니다.

--> 위에와 다르게 다 색상이 변해짐 이유는 faker라는 단어가 모드 들어가기 때문에

📌 5. [속성명 |= “속성값”]

[속성명]이 일치하고, [속성값]이 특정 접두사로 시작하는 요소를 선택자로 지정합니다.
공백이 있으면 안됨
언더바(_)의 경우 안됨
하이픈(-) 연결되면 됨

  <style>
    div[class|="layer"] { background-color: red; }
  </style>
  </head>
  <body>
 	<div class="layer">layer</div>
	<div class="layer-red">layer</div> 
    <div class="red-layer">layer</div> 
	<div class="layer-blue">layer</div>
	<div class="layer yellow">layer</div> 
	<div class="green layer">layer</div> 
  </body>

layer

📌 6. [속성명 ^= “속성값”]

[속성명]이 일치하고, [속성값]이 특정 접두사로 시작되는 요소를 선택자로 지정합니다.

<style>
  div[class^="minions"] { background-color: red; }
  </style>
  <body>
 	<div class="minions">layer</div>
	<div class="minions-yellow">layer</div>
	<div class="minions_yellow">layer</div>
	<div class="minions minimini">layer</div>
	<div class="yellow minions">layer</div>
	<div class="yellow_minions">layer</div>
  </body>

layer

📌 7. [속성명 $= “속성값”]

특정 접미사로 끝나는 속성값을 선택자로 지정하고 싶은 경우 $= 기호를 사용합니다.

<style>
  div[class$="end"] { background-color: red; }
  </style>
  <body>
 	<div class="end">layer</div>
	<div class="start end">layer</div>
	<div class="ok_end">layer</div>
	<div class="end bye">layer</div>
  </body>