필터(FILTER) 2
이번에는 자식 필터이다
:first-child 첫 번째 자식 요소
:last-child 마지막 자식 요소
:first-of-type 첫 번째 일치하는 타입의 엘리먼트
:last-of-type 마지막 일치하는 타입의 엘리먼트
:nth-child(n) n번째 수식을 만족하는 엘리먼트들
:nth-last-child(n) 끝에서부터 n번째 수식을 만족하는 객체
:nth-of-type(n) n번째로 일치하는 타입의 앨리먼트
:nth-last-of-type(n) 끝에서 부터 n번째로 일치하는 타입의 엘리먼트
:only-child 유일한 자식 요소
:only-of-type 유일한 타입의 자식 요소
적어 보니 많지만 실상 사용하게되는것들은 한정적일거 같다.
<body>
<p>남자</p>
<ol>
<li>1번 남자
<li>2번 남자
<li>3번 남자
</ol>
<p>여자</p>
<ol>
<li>1번 여자
<li>2번 여자
<li>3번 여자
</ol>
<script>
$('li:first').css('background', 'yellow'); // li의 첫번째 딱하나
$('li:first-child').css('background', 'green'); // li의 자식태그중에 첫번째 여기서는 2개다.
</script>
</body>
:has(p) p태그를 가진 객체만 선택한다.
:containts(s) s라는 문자열을 가진 객체만 선택한다.
:empty 빈 요소들
:parent 자식을 가지는 요소들 그냥 내용이 있으면 된다.
<body>
<p>문단입니다</p>
<p>이 문단안에는 <span>Span</span>이 있습니다.</p>
<p>A를 포함하는 문단입니다.</p>
<p></p>
<p> </p>
<script>
$('p:has(span)').css('background', 'red'); // p태그중에 span을 가지고있는 경우
$('p:contains(A)').css('background', 'blue'); // p태그중에 A라는 문자를 가지고있는 경우
$('p:empty').css('background', 'yellow'); // 비어있는 경우
$('p:parent').css('background', 'green'); // p태그중에 자식노드가 있는경우 부모여도 됨 그러니 내용이 있으면 된다.
</script>
</body>