- css2024년 08월 02일
- chantleman
- 작성자
- 2024.08.02.:42
우선순위
id > class > element
<body> 들여쓰기를 통해서 부모자식간의 관계를 확연히 확인 가능 <div id="parent"> <div>자식1</div> <div id="second">자식2 <div>후손1</div> <p>후손2 (p)</p> <div>후손3</div> </div> <div>자식3</div> <p>자식4 (p)</p> <div>자식5</div> </div> </body>
자식과 자손
- id가 parent인 요소의 자식과 자손 중 div인 것들
#parent div{ border-color:gold; }
자식만
- id가 parent인 요소의 자식중 div인 것만
#parent > div{ border-style: double; }- div의 바로 뒤에 있는 p태그만
<body> <div> <p> </p> <section> <p> </p> </section> </div> </body> <style> div>p{ } </style>이런 경우에는 section에 있는 p태그는 적용되지 않고
div 요소의 직접적인 자식인 p태그에만 스타일을 적용됩니다.
모든 p태그에 적용하고싶다면
div p{ }- section에만 스타일 적용할 때
<body> <div> <section> <p> </p> </section> <p> </p> </div> </body> <style> div > section{ } </style>이렇게 하게 되면 section에만 스타일이 적용되고 section안에 있는 p태그에는 영향을 주지 않습니다.
- section안에 있는 p태그에만 적용
<body> <div> <section> <p> </p> </section> <p> </p> </div> </body> <style> div > section >p{ } </style>div > section > p같은 경우에는 section에는 적용되지 않고 p태그에만 적용됩니다.
바로 뒤 형제 하나만
#second +p { color:blue; }바로 뒤에 p태그가 아니라 다른 태그라면 반영 안됨
#second +div+ p{ color:blue; }second id 아래 div태그 아래에 p태그가 있으니까
이런 식으로 작성하면 p태그에 적용됨
뒤 모든 형제
- id가 second인 요소의 뒤 모든 형제 중 div인 것들
#second ~div{ color:rgb(115, 186, 44); /*+가 ~보다 우선순위 더 높음*/ }- id가 second인 요소의 뒤 모든 형제
#second ~*{ color:rgb(115, 186, 44); }+가 ~보다 우선순위 더 높음
- id가 second인 태그 안에 있는 요소들
#second *{ color:rgb(115, 186, 44); }728x90'js' 카테고리의 다른 글
레이아웃 (0) 2024.08.06 css2 (0) 2024.08.05 선택 값 출력(getElement~, querySelector) (1) 2024.08.02 데이터 전달, post, get (0) 2024.08.01 script (1) 2024.08.01 다음글이전글이전 글이 없습니다.댓글
스킨 업데이트 안내
현재 이용하고 계신 스킨의 버전보다 더 높은 최신 버전이 감지 되었습니다. 최신버전 스킨 파일을 다운로드 받을 수 있는 페이지로 이동하시겠습니까?
("아니오" 를 선택할 시 30일 동안 최신 버전이 감지되어도 모달 창이 표시되지 않습니다.)