작업 대상 | 선택자 적용 |
<div> <em>hwak</em> <br> <span><em>gogo</em></span> <br> <em>sing</em> </div> * 분홍 em : div 자식 선택자 * 하늘 em : span 자식 선택자이면서 div 자손 선택자 |
① $('div em').css('background-color','pink'); → div 하위 태그 em 전부 다 스타일 적용시켜라 hwak, gogo, sing에 분홍색 배경 적용됨 ※ 태그 사이에 스페이스바는 앞 태그의 자손을 선택할 때 사용 여기선 div 태그 안에 있는 em 태그 전부 ② $('div > em').css('background-color','pink'); → div 바로 밑에 있는 자식 태그 em에만 스타일 적용시켜라 hwak, sing 분홍색 배경 적용됨 (div 태그 입장에서 바로 밑에 있는 em 태그는 자식 태그, span 밑에 있는 em 태그는 자손 태그로 css 적용 제외) ※ 태그 사이에 >는 앞 태그의 바로 밑에 태그 선택할 때 사용 여기선 div 태그 안에 있는 em태그 중 바로 밑에 있는 em 태그만 선택 |
▼ (관련) jquery.js 파일 - css 함수 정리
728x90
반응형
댓글