Mozilla 한국 커뮤니티

중첩된 엘리먼트에 CSS 지정할 때에요..

간혹 상위 엘리먼트까지 명확히 지정해 주어야만 스타일이 적용이
되는 경우가 있더라구요.

특히 클래스인 경우가 더 그런 것 같던데..

[style type="text/css"]
 #a #b #c .d {
   
 }
[/style]

[div id="a"]
  [div id="b"]
    [div id="c"]
       [div class="d"][/div]
    [/div]
  [/div]
[/div]

어떤 경우엔 해당 엘리먼트만 지정해도 되고 어떤 때는 상위 엘리먼트 ID까지
명확히 지정해야만 적용이 되고..

왜 그럴까요..???

CSS 속성에는 자식 엘리먼트로 그 속성을 상속해 주는 속성과 그렇지 않은 속성이 있습니다.
따라서 상속되는 속성은 최상위 엘리먼트에 적용해도 손자에게 까지 상속되지만 상속되지 않는 속성은 자기 자신 또는 상속이 가능한 자식에게 까지만 상속을 해줍니다.

예를들어 body 에 서체를 적용하면 다른 자식들에게는 모두 상속되지만 form 안쪽의 콘트롤 엘리먼트들에게는 상속되지 않는 상황이 바로 이런 경우의 적절한 예 같습니다.

아래 링크를 보시면 CSS 속성에 따라서 '전달:됨, 전달:안됨' 이라는 항목이 있습니다. 전달은 상속을 의미하므로 상속되는 속성과 그렇지 않은 속성을 확인하실 수 있습니다.

http://trio.co.kr/webrefer/css2/propidx.html

특히 font 와 같은 경우 '전달:됨' 이라고 표기되어 있지만 form 외부에서 지정된 서체가 form 안쪽의 콘트롤 엘리먼트 들에게는 전달되지 않음에 유의합니다. 특이한 케이스죠.

지금 격고있는 상황도 아마도 이런 특이한 케이스는 아닌지 추측됩니다. 코드 원문이 있었다면 정확하게 진단이 될것 같은데 그렇지 않아서 아쉽군요.

제가 올린 글을 지금 다시 읽어보니 제가 질문글을 잘 못쓴 거 같네요..

dece24께서 답변해 주셨는데..
죄송합니다.. ^^;; 그리고, 감사합니다.

Code: Select all

[div id="a"] 
  [div id="b"] 
    [div id="c"] 
       [div class="d"][/div] 
    [/div] 
  [/div] 
[/div]

질문 올린 배경은
위에처럼 class가 d인 엘리먼트처럼 안쪽의 엘리먼트에 스타일을 적용하기 위해서..

Code: Select all

[style type="text/css"]
  .d {
    
  }
[/style]

이렇게 했는데요.. 간혹 적용이 안되는 경우가 있더라구요..

그래서,

Code: Select all

[style type="text/css"] 
 #a #b #c .d { 
    
 } 
[/style]

이렇게 하니까 또 적용이 되구요..

왜 그런지 잘 모르겠네요.. ^^;;

소스는 너무 복잡해서(?) 못올렸어요.. ^^;;

.d 가 다른곳에 지정이 되어 있거나 우선순위가 더 높은 셀렉터가 있는 것 같습니다. 셀렉터의 우선순위 계산은 http://dnzin.com/cunningweb/2006/09/04/ ... ification/ 을 참고해 보세요.

감사합니다.
이런 계산 법이 있었군요..

dece24님, hyeonseok님 두 분 답변 감사합니다.

^^

Mozilla 한국 커뮤니티

중첩 엘리먼트 스타일 지정할 때요..

중첩 엘리먼트 스타일 지정할 때요..

CSS의 property 에 따른 상속문제인듯

제가 질문 글을 잘 못 올렸네요.. ^^;;

감사합니다. ^^