엄범


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')``가 더 빠르다.



'Languages & Frameworks > Front-end' 카테고리의 다른 글

[HTML] form tag, input 태그 속성  (0) 2017.06.10
[Front-end] Ajax  (0) 2017.05.28
CSS Selector  (0) 2017.05.24
CSS 팁과 기본 지식  (0) 2017.05.03
[HTML, JS] refresh / redirect  (0) 2017.04.29
[jQuery] CDN, Usage  (0) 2017.04.13