CSS Selector

CSS Selector

cascading 우선순위

```

!important > style attribute > #id > .class > tag selector

```

• 같은 cascading 우선순위를 가질 경우 아래에 위치한 style이 더 높은 우선순위를 가진다.
• minify할 때 주의해야 할 점이, 같은 속성 같은 값을 지정하는 경우 cascading을 고려해서 일부러 따로 지정해놓은 경우도 하나로 합쳐버린다. 그래서 끝 값 1정도를 다르게 주어야 하는 경우가 있다.
• 가장 구체적으로 지정된 selector가 제일 우선시 된다.
• 그래서 ``html <div class="body center">``요렇게 있는 DOM에서...
  `` .body.center``로 선택한 것이 `` .body``로 선택한 것 보다 우선한다.
• 이런 경우 `` .body.body``로 적어주면 `` .body.center``와 같은 우선순위로 만들 수 있다!

$('.article *') / $('.article > *') / $('.article') 은 다르다.

``js $('.article *')``은 ``.article``의 모든 후손을 각각의 인자로 반환하기 때문에, 반복 돌리면 index 당 하나의 DOM이 반환된다.

``js $('.article > *')``은 ``.article``의 모든 직계 자손을 각각의 인자로 반환한다.

``js $('.article')``은 ``.article`` 자체를 하나의 인자로 반환한다. 따라서 ``.article``이 하나만 있는 경우 인자가 하나다.

---

여러 DOM 선택은 ,로 구분한다.

``js $('h1, p').css('color', 'red');``

t_tag 중 id=t_id인 DOM만 선택하고 싶은 경우 붙여서 쓴다.

``js $('t_tag#t_id')``

두 가지 class를 모두 가지고 있는 DOM은 붙여서 쓴다.

``js $('.t1_class.t2_class')``

직계 자식 선택은 > 로 한다. 

``js $('parent > child')``

모든 자손 선택은 띄어 쓴다.

``js $('ancestor descendant')``

속성 선택자

``js $('tag[attribute*=value]')``

``js attribute~="value"`` 를 사용하면 띄어쓰기로 구분된 value를 묶어서 지정할 수 없다.

``js attribute*="value"`` 를 사용해야 value라는 substring을 해당 attribute의 값으로 포함하고 있는 element를 검색할 수 있다.

필터 선택자 ( pseudo class selector )

``js $('tag:filter')``

말단 노드(leaf) 선택

``js $('div:not(:has(*))')``

그러나 이 경우 b나 s나 i 등이 포함되어 있으면 leaf로 인식하지 않기 때문에 이들은 예외처리해야 하는데, css selector를 사용하면 좀 복잡해진다.

더 빠르고 효율적인 방식은 ``filter()`` method를 사용하는 것이다.

```js

$("div").filter(

   function(index) {

      var isLeaf = $(this).find(':first').length === 0;

      return isLeaf;

   }

);

```

``js .find(':first')``를 ``js .children()``로 변경해도 되는데 ``js .find(':first')``가 더 빠르다.

• http://taeyo.net/Forum/Content.aspx?SEQ=1514&TBL=KNOWHOW&PGN=1
• https://www.w3schools.com/cssref/css_selectors.asp