> 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/custom-selectors.md).

# custom selectors

## CSS Selectors

### not first child

{% tabs %}
{% tab title="CSS" %}

```css
/* not first child */
:not(:first-child)

/* starting from 2nd child */
:nth-child(n+2)

/* next sibling */
A + A
```

{% endtab %}

{% tab title="📗 參考" %}

* :speaking\_head: [:not(:first-child) selector](https://stackoverflow.com/a/12289888/5409815) (StackOverflow)
* :point\_right: [combinators](/web/css/selectors/combinators.md)
* :blue\_book: [:first-child](https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child)
* :blue\_book: [:not()](https://developer.mozilla.org/en-US/docs/Web/CSS/:not)
  {% endtab %}
  {% endtabs %}

## JS Selector Functions

{% tabs %}
{% tab title="JS" %}

```javascript
// $ ⭐️
function $(selector, parent = document){
  return parent.querySelector(selector);
}

// $all ⭐️
function $all(selector, parent = document){
  return parent.querySelectorAll(selector);
}

// ⭐️ element.$('div')
// ⭐️ 注意：prototype method 必須放前面，不能擺最後面❗️
Element.prototype.$ = function(selector){
    return this.querySelector(selector);
}

// test run
console.log($('div'));              // HTMLDivElement
console.log($('div').$('span'));    // HTMLSpanElement
```

{% endtab %}

{% tab title="📗 參考" %}

* :blue\_book: [Document](https://developer.mozilla.org/en-US/docs/Web/API/Document)
  * [`.querySelector()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector)
  * [`.querySelectorAll()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll)
* :blue\_book: Element
  * [`.querySelector()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector)
  * [`.querySelectorAll()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll)
    {% endtab %}
    {% endtabs %}