본문 바로가기
IT관련/CSS

[CSS] 더듬더듬... 확고의 기억 더듬기 (CSS 기초 편 - 선택자①)

by 확고 2022. 4. 1.
728x90
반응형
작업 대상 선택자 적용
<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 함수 정리

 

 

[JQuery] jquery.js 파일 - css 함수

※ jquery.js 파일 안에 있는 css 함수 정의해 있는 걸 가져다가 사용하므로 js 파일 추가 및 위치 설정 필요 함수 구분 설명 사용 예시 객체.css('속성','값'); 객체에 스타일 적용 ① $("div em").css('border'

j-growthdiary.tistory.com

 

728x90
반응형

댓글