2013-09-04 2 views
0

나는 이것을 알아 내려고 노력했지만 올바르게 생각하지 못했을 것이다. 아마도 나는 내 생각으로는 멀어졌지만, 이것은 그 것이다.학부모 Div에 의한 CSS CSS UL 요소

UL 클래스 이름을 제어 할 권한이 없지만 그대로 있습니다. 난 단지의 클래스 이름을 변경할 수 있습니다, 코드는 다음과 같습니다 : - 내가 가지고있는

<div class="custom-parent-div-name-changeable"> 
<div class="custom-child-div-name-changeable"> 
<div class="cant-change-this"> 
<ul class="name-cant-be-changed"> 
<li>first item</li> 
<li>second item</li> 
<li>third item</li> 
</ul> 
</div> 
</div> 
</div> 

문제는 UL이 배경 및 테두리 세트가 있습니다은 "이름 캔트 --변경"클래스입니다. ! 중요한 선택자를 사용하여 다른 스타일 시트에서 배경과 테두리를 제거해야합니다. 웹 사이트에 사용되는 소프트웨어의 제한 때문에.

이 같은 클래스 ("name-cant-be-changed")가 페이지에서 두 번 사용됩니다. 그래서 "cant-change-this"div 클래스 안에있는 "name-cant-be-changed"를 위해 CSS를 만들어야합니다. "name-cant-be-changed"의 두 인스턴스는 클래스 "cant-change-this"가있는 div 내에 있지만 다른 부모 클래스 이름을가집니다 (예 : 이는 모두있는 부모를 기반으로 렌더링

<div class="parent-div"> 
<div class="any-old-name"> 
<div class="cant-change-this"> 
<ul class="name-cant-be-changed"> 
<li>apple</li> 
<li>orange</li> 
<li>banana</li> 
</ul> 
</div> 
</div> 
</div> 

가 어떻게이 UL 클래스에 대해 별도의 CSS를 만들 수 있습니다 "이름 캔트 --변경"- "어떤 된 이름"과 같이?

나는 아무 소용이 클래스 이름의 다양한 조합으로 다음을 사용하여 시도 : -

.custom-child-div-name-changeable > .name-cant-be-changed { 
background: none !important; 
border: none !important; 
} 

는 사람이 되거 수 있습니까? 미리 감사드립니다!

답변

0

> 연산자는 "선행 선택자의 직접 하위"를 의미합니다. 난 당신이 뭔가를하려는 생각 :

.custom-child-div-name-changeable .name-cant-be-changed { 
    background: none !important; 
    border: none !important; 
} 

또는

.custom-child-div-name-changeable > div .name-cant-be-changed { 
    background: none !important; 
    border: none !important; 
} 

또는

.custom-child-div-name-changeable > div.cant-change-this .name-cant-be-changed { 
    background: none !important; 
    border: none !important; 
} 
+0

의 즉각적인 부모가 .cant-change-this의 바로 위 부모와 .name-cant-be-changed 모든 요소를. 나는이 모든 클래스 이름을 사용하여 가능한 모든 조합을 시도 했음에 틀림 없다. –

0

다음 중 하나를

.any-old-name .name-cant-be-changed {…} 

또는

,
.any-old-name > .cant-change-this > .name-cant-be-changed {…} 

첫 번째는 '.name-cant-be-changed'인 모든 요소에 부모 어딘가에 .any-old-name이있는 것입니다.

는 두 번째 읽기 : 두 번째 옵션은 완벽하게 작동 .any-old-name