> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/css/selectors.md). # selectors [CSS](/web/css.md) ⟩ [CSS Rules](/web/css/rules.md) ⟩ selectors {% hint style="info" %} {% endhint %} {% tabs %} {% tab title="🔴 主題" %} * [basic selectors](/web/css/selectors/basic.md) * [attribute selectors](/web/css/selectors/attribute-selectors.md) * [combinators](/web/css/selectors/combinators.md) * [pseudo-class](/web/css/selectors/pseudo-class.md) * [pseudo-element](/web/css/selectors/pseudo-element.md) * [custom selectors](/web/css/selectors/custom-selectors.md) * [select direct children by JS](/web/css/selectors/direct-children-by-js.md) {% endtab %} {% tab title="🛠 工具" %} * :tools: [CSS Diner](https://flukeout.github.io/) {% endtab %} {% tab title="📗 參考" %} * [ ] :green\_book: [CSS Selectors](https://css-tricks.com/almanac/selectors/) (CSS Tricks) * [ ] JavaScript: The Definitive Guide (15.3 Scripting Documents) {% endtab %} {% tab title="📘 手冊" %} * [NodeList](https://developer.mozilla.org/en-US/docs/Web/API/NodeList) * [Document.querySelector()](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector) * [Document.querySelectorAll()](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) * [Element.querySelector()](https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector) * [Element.querySelectorAll()](https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll) * [DocumentFragment.querySelector()](https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment/querySelector) * [`DocumentFragment.querySelectorAll()`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment/querySelectorAll) {% endtab %} {% tab title="👥 相關" %} * DOM ⟩ [querying elements](/web/browser/dom/querying-elements.md) {% endtab %} {% tab title="🗣 討論" %} * [Which characters are valid in CSS class names/selectors?](https://stackoverflow.com/questions/448981/which-characters-are-valid-in-css-class-names-selectors) {% endtab %} {% endtabs %} {% tabs %} {% tab title="💾 語法" %} {% tabs %} {% tab title="基本" %} ```css div /* tag name selector:
*/ #nav /* id selector : id="nav" */ .warning /* class selector : class="warning" */ ``` {% endtab %} {% tab title="屬性" %} ```css /* attribute selector */ p[lang="fr"] /*

*/ *[name="x"] /* any element with name="x" */ ``` {% endtab %} {% tab title=":prop?" %} ```css body > h1:first-child /* first

direct child of */ ``` {% endtab %} {% tab title="DOM" %} ```css /* ------------ 親子關係 ------------ */ /* 不一定是直接的親子關係 */ ancestor descendant /* op: space */ /* 直接子元素 */ parent > direct-child /* 直接子元素，但不是第一個(以下寫法效果都一樣) */ parent > direct-child + next-siblling /* immediate sibling */ parent > :not(:first-child) parent > :nth-child(n+2) /* n = 0, 1, 2 ... */ /* 沒有子元素的元素(最底層) */ :not(:has(*)) /* :has() 為 CSS4 功能 */ /* ------------ 兄弟關係 ------------ */ /* (緊鄰著的)下一個兄弟(next sibling) */ brother + next-younger-brother /* 後面的兄弟(following sibling) */ older ~ younger /* 不必一定要緊接著的 */ ``` {% endtab %} {% tab title="組合" %} ```css span.fatal.error /* */ span[lang="fr"].warning /* */ ``` {% endtab %} {% endtabs %} {% endtab %} {% tab title="⭐️ 重點" %} {% hint style="warning" %} The **return value** of [querySelectorAll()](https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector) is **not** an **array** of [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) objects. Instead, it is an **iterable** **array-like** object known as a [NodeList](https://developer.mozilla.org/en-US/docs/Web/API/NodeList). {% endhint %} {% hint style="info" %} NodeList objects * have a **length** property, can be **indexed** like arrays. * can **loop** with traditional **for( ; ; )** loop, **for-of** loop, **forEach()** method. * can convert into **array** with **Array.from()**. {% endhint %} {% hint style="danger" %} However, some older browsers have **not implemented** `NodeList.forEach()` nor `Array.from()`. This can be circumvented by using [`Array.prototype.forEach()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) — see this document's [Example](https://developer.mozilla.org/en-US/docs/Web/API/NodeList#example). {% endhint %} {% endtab %} {% endtabs %}