# pseudo-class

{% tabs %}
{% tab title="📘 手冊" %}
* [Pseudo-classes](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes) (MDN)
* [Selectors & Properties](https://css-tricks.com/almanac/) (CSS-Trick)
{% endtab %}

{% tab title="👥 相關" %}
* DOM ⟩ [querying-elements](../../browser/dom/querying-elements "mention")
{% endtab %}
{% endtabs %}

| pseudo-class                                                                      | notes                                                                                                                                                                                              | example                                    |
| --------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| [:first-child](https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child)     | <p>⭐️ 注意：<br> <strong>p:first-child</strong> 是指一個 &#x3C;p> <strong>同時</strong>又是 <strong>:first-child</strong>。<br>如果要選「<strong>第一個出現</strong>」的 &#x3C;p>，要用 <strong>p:first-of-type</strong>。</p> |                                            |
| [:first-of-type](https://developer.mozilla.org/en-US/docs/Web/CSS/:first-of-type) |                                                                                                                                                                                                    |                                            |
| [:nth-of-type( )](https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type)  |                                                                                                                                                                                                    |                                            |
| :last-child                                                                       |                                                                                                                                                                                                    |                                            |
| :only-child                                                                       |                                                                                                                                                                                                    |                                            |
| :nth-child(an+b)                                                                  |                                                                                                                                                                                                    |                                            |
| :**not**( «selector» )                                                            |                                                                                                                                                                                                    |                                            |
| :not(:defined)                                                                    | unkowned tag :point\_right:[custom element upgrade](../../../component/examples/less-than-time-formatted-greater-than#custom-element-upgrade)                                                      | [undefined tag](../examples/undefined-tag) |
| :**hover**                                                                        |                                                                                                                                                                                                    |                                            |
| :focus                                                                            |                                                                                                                                                                                                    |                                            |
| :**root**                                                                         | <**html**> element in HTML file                                                                                                                                                                    |                                            |
| [:defined](https://developer.mozilla.org/en-US/docs/Web/CSS/:defined)             | any element that has been defined (builtin or [custom](../../component/custom-element))                                                                                                            |                                            |
| [:scope](https://developer.mozilla.org/en-US/docs/Web/CSS/:scope#direct_children) | get direct children of an element                                                                                                                                                                  |                                            |
