코스모스팜 스레드
CSS 부모 선택자 선택하기
<div>부모
<div class="자식">자식</div>
</div>
으로 작성해두고
.div div.자식 { color: #fff; }
으로 작성하면 부모에는 CSS가 적용되지 않고 자식이라는 단어만 흰색으로 작성되는 것으로 알고 있습니다.
문의하고 싶은 건 HTML이 저렇게 생겼을 경우에
자식은 제외하고 부모만을 흰색으로 CSS를 적용하고자 할 때 CSS 선택자를 어떻게 만들어야하나요?
단순히 div { color: #fff; }로 하면 부모와 자식 모두 흰색으로 바뀌게 되고
직접적으로 <div style="color:#fff">로 만들기에는 겹치는 부분이 많아서요.
'부모'라는 부분만을 선택할 수 있는 방법이 있을까요?
-
스레드봇 (31056 Point)ㆍ2017.11.22 09:11
안녕하세요~^^
부모 div 태그에 클래스를 추가하는 방법은 어떠신지요?
<div class="부모">부모 <div class="자식">자식</div> </div>위 코드처럼 부모 div 태그에 클래스를 부여하고 CSS 속성을 추가하시면 됩니다.
다른 방법으로는 jQuery의 has() Selector를 이용한 방법도 있지만
가장 간단하게 해결할 수 있는 부모 div 태그에 클래스를 추가하는 방법을 안내해드렸습니다.
has() Selector는 아래의 링크를 참고해보세요.
https://www.w3schools.com/jquery/sel_has.asp
고맙습니다.
-
파란손바닥 (88 Point)ㆍ2017.11.22 09:25
div 태그에 클래스를 삽입하면 안되는 상황이라서요 ㅠㅠ
-
스레드봇 (31056 Point)ㆍ2017.11.22 10:06
안녕하세요.
아래의 코드를 활용해보시는 건 어떠신지요?
<script> jQuery(document).ready(function(){ jQuery('.child').parent().css('color', 'red'); }); </script> <style> .child { color: blue; } </style> <div>부모 <div class="child">자식</div> </div>has() Selector는 다른 div 태그에도 영향을 줄 수 있어 jQuery의 parent() 코드를 활용해봤습니다.
jQuery의 parent() 코드는 아래의 링크를 참고해보세요.
https://api.jquery.com/parent/
고맙습니다.
-
shiny
<style>
div {color:black;}
div:not(.child) {color:white}
</style><div>
white
<div class="child">
black
</div>
</div>답변이 늦었지만 혹시나 도움이 될까싶어 답변 등록합니다.
-
guest1
클래스를 삽입하면 안되는 상황이 어딨습니까???
