2017-04-14 9 views
3

이 하나 trippy입니다. 나는 어떤 생각이 감사CSS는 특정 하위 요소가있는 요소의 형제를 선택합니까?

:-(이 불가능하다고 생각하는 기대어입니다.

는 아래의 조각 많은 .step 요소가 훨씬 더 큰 구조의 일부입니다.

나는 모든 .stepText 요소를 일치 할 필요 , .stepTitleAndImages ul.standard

옆에 .stepImages.standard 아이

있다 .stepTitleAndImages 아이가 .step 부모가 모두 .stepText 요소를 일치
<div class="step"> 
    <div class="stepTitleAndImages"> 
    <h3 class="stepTitle"></h3> 
    <ul class="stepImages standard"></ul> 
    <div class="clearer"></div> 
    </div> 
    <div class="stepText "></div> **HOW TO SELECT ALL ELEMENTS LIKE THIS ONE?** 
    <div class="clearer"></div> 
</div> 

<div class="step"> 
    <div class="stepTitleAndImages"> 
    <h3 class="stepTitle"></h3> 
    <ul class="stepImages medium"></ul> 
    <div class="clearer"></div> 
    </div> 
    <div class="stepText "></div> 
    <div class="clearer"></div> 
</div> 

추신 : HTML을 수정할 수 없습니다. 순수한 CSS 이외의 것을 사용할 수 없습니다.

답변

1

당신의 HTML 구조와 순수 CSS로 수행 할 수 없습니다 수이. 순수 CSS와 HTML의 구조와 변화 문제에 가장 가까운 솔루션은 부모 태그에 standard 클래스를 이동하는 것입니다 :

<div class="stepTitleAndImages standard"> <h3 class="stepTitle"></h3> <ul class="stepImages"></ul> <div class="clearer"></div> </div>

이 당신이 adjacent sibling selector (+)를 사용할 수 있도록 것, 어떤 일치가이 같은 첫의 직접 다음 형제, 만약 두 번째 선택 :

.stepTitleAndImages.standard + .stepText { /* Styles */ }

가 더 유연한 접근이를 사용하는 것

.stepTitleAndImages.standard ~ .stepText { /* Styles */ }

:has 의사 클래스 is in development by Mozilla하지만 아직 안정적인 브라우저를 공격하지 : general sibling selector하는 에게뿐만 아니라 직접 다음 중 하나를 먼저 선택, 앞에 어떤 형제 일치합니다. 그것으로, 당신의 HTML 구조, 당신은 갈 수 :

.stepTitleAndImages:has(.standard) + .stepText { /* Styles */ }

불행하게도, 현재 당신이 (당신의 HTML 구조)에만 CSS와 다른 방법으로이 문제를 해결할 수 없습니다.

+1

Fausto NA라는 정교한 답변에 감사드립니다. 불행히도, 나는 여기에서 외부 시스템을 (다시) 스타일링하고있다. HTML에 대한 통제권이 없다. – CarvedBlock

+0

고마워요! upvoting 고려, 지금 당신은 충분한 포인트가 :) –

3

그냥 모두 그럼 당신은 그

에 대한 jQuery를 요구해야

.step .stepText { 
... Your CSS here 
} 

을 사용하여 선택하는 두 번째 사용

.step:nth-child(2) .stepText { 
... Your CSS here 
} 

를 들어 첫 번째 경우

.step:nth-child(1) .stepText { 
... Your CSS here 
} 

을 선택하기 위해 이것을 사용

선택 부모 형제 아직 순수 CSS는, 당신은 JQuery와의 단일 선으로이를 달성 할 수있는 유일한 불가능 :

$('ul.standard').parent().siblings(".stepText").css(...your CSS here); 
+0

감사합니다. vkubre! 그러나 나는 분명히 나 자신을 분명하게 표현하지 않았다.당신의 잘못이 아닌. 거래는 소스에 분산이 패턴에 해당하는 모든 요소를 ​​선택하는 것입니다. 제 n 자녀가 어떻게 그 일을 할 수 있는지 저는 생각하지 않습니다. 저는 실제 상태를 반영하도록 질문을 편집했습니다. . – CarvedBlock

+0

선택 부모 형제 당신은 JQuery와의 단일 선으로이를 달성 할 수있는, 아직 순수한 CSS와 수 없습니다 :. ** $ ('ul.standard') 부모() 형제 ("stepText.") CSS (. '배경', '#의 F55는'); ** 정확히 다음 .standard 또는 .medium 클래스의 패턴을 알고하지만 경우 : n 번째 chlid (_your 패턴 수식 here_는) 다음 만 – vkubre

+0

다시 한번 감사 순수 CSS와 함께이 achive 수 @ vkubre. 이 특정 프로젝트를 불가능하게 만듭니다. 건배. – CarvedBlock

관련 문제