# 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](combinators)
* :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 %}
