CSS Selector
CSS Selector
cascading 우선순위
1
2
3
!important > style attribute > #id > .class > tag selector
- 같은 cascading 우선순위를 가질 경우 아래에 위치한 style이 더 높은 우선순위를 가진다.
- minify할 때 주의해야 할 점이, 같은 속성 같은 값을 지정하는 경우 cascading을 고려해서 일부러 따로 지정해놓은 경우도 하나로 합쳐버린다. 그래서 끝 값 1정도를 다르게 주어야 하는 경우가 있다.
- 가장 구체적으로 지정된 selector가 제일 우선시 된다.
- 그래서
<div class="body center">요렇게 있는 DOM에서….body.center로 선택한 것이.body로 선택한 것 보다 우선한다. - 이런 경우
.body.body로 적어주면.body.center와 같은 우선순위로 만들 수 있다!
$(‘.article *’) / $(‘.article > *’) / $(‘.article’) 은 다르다.
$('.article \*')은 .article의 모든 후손을 각각의 인자로 반환하기 때문에, 반복 돌리면 index 당 하나의 DOM이 반환된다. $('.article > \*')은 .article의 모든 직계 자손을 각각의 인자로 반환한다. $('.article')은 .article자체를 하나의 인자로 반환한다. 따라서 .article이 하나만 있는 경우 인자가 하나다.
여러 DOM 선택은 ,로 구분한다. $('h1, p').css('color', 'red');
t_tag 중 id=t_id인 DOM만 선택하고 싶은 경우 붙여서 쓴다. $('t\_tag#t\_id')
두 가지 class를 모두 가지고 있는 DOM은 붙여서 쓴다. $('.t1\_class.t2\_class')
직계 자식 선택은 > 로 한다. $('parent > child')
모든 자손 선택은 띄어 쓴다. $('ancestor descendant')
속성 선택자 $('tag[attribute\*=value]')
attribute~="value" 를 사용하면 띄어쓰기로 구분된 value를 묶어서 지정할 수 없다. attribute\*="value" 를 사용해야 value라는 substring을 해당 attribute의 값으로 포함하고 있는 element를 검색할 수 있다.
필터 선택자 ( pseudo class selector ) $('tag:filter')
말단 노드(leaf) 선택 $('div:not(:has(\*))')
그러나 이 경우 b나 s나 i 등이 포함되어 있으면 leaf로 인식하지 않기 때문에 이들은 예외처리해야 하는데, css selector를 사용하면 좀 복잡해진다. 더 빠르고 효율적인 방식은 filter() method를 사용하는 것이다.
1
2
3
4
5
6
7
$("div").filter(
function(index) {
var isLeaf = $(this).find(':first').length === 0;
return isLeaf;
}
);
.find(':first')를 .children()로 변경해도 되는데 .find(':first')가 더 빠르다.