# 속성 선택자

> CSS 속성 선택자 , CSS 선택자&#x20;

## CSS 속성 선택자

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

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

#### 예시

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

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

* `*[] { ... }` : \*요소가 \[] 속성값을 가지고 있다면.
* 연속해서 사용 가능 \[], \[] 두 가지 속성을 모두 갖고 있다.
* \[] 앞에는 생략 가능

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

### **고급 속성 선택자**

* `<^>`: 해당 문자로 시작하는 것을 찾는다.
* `<$>`: 해당 문자로 끝나는 것을 찾는다
* `<*>`: 어디에 있던지 문자를 포함하고 있는 것을 모두 찾는다.
* 예시

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://shhn0509.gitbook.io/html-and-css/css-2/css-1/undefined/undefined-1.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
