다른 요소 바로 앞과 뒤의 요소에 스타일 정의 CSS

바로 앞과 뒤의 DOM에서 요소 스타일을 지정하기 위해 정확한 CSS 선택기를 찾거나 (적어도 하나가 있는지를 찾기 위해) 지난 시간을 검색했습니다 다른 요소.다른 요소 바로 앞과 뒤의 요소에 스타일 정의 CSS

현재 ul의 li 개의 요소는 border-bottom 속성을 가지고 있습니다. DOM의 바로 뒤에있는 요소가 있으면 해당 테두리의 색을 변경하고 싶습니다. 가능하다면 별도의 클래스를 사용하지 않는 것이 좋습니다. 내가 <li>List Item 3</li> 즉시 li.divider 다음중인 다른 li 요소 border-bottom: none를 추가 할

<ul> 
    <li>List Item 1</li> 
    <li>List Item 2</li> 
    <li>List Item 3</li> 
    <li class="divider">2</li> 
    <li>List Item 4</li> 
    <li>etc.</li> 
</ul>

는 다음과 같은 마크 업을 고려하십시오.

ul > li과 같은 CSS 선택 도구가 있습니까? 크로스 브라우저 일 필요는 없으며 CSS3 일 수 있습니다. 그냥 WebKit 브라우저에서 작동해야합니다 ...

출처

2011-08-25 BenM

이 가능하다고 생각하지 않습니다. 이전 요소에 대한 CSS 선택기가 없습니다. 선행 형제도 아니고 조상도 아닙니다.

당신은, 그러나, 다음 (만 다음) 형제에 스타일을 적용 할 수 있습니다

li.divider + li {border:1px solid black}

당신이 그것을 체인 수 있습니다. 이 스타일 :

li.predivider {border-bottom: none} /*before*/ 
li.predivider + li {border:1px solid black} /*divider*/ 
li.predivider + li + li {border-bottom: none} /*after*/

이 (결합) :

li.divider {border:1px solid black} /*divider*/ 
li.divider + li {border-bottom: none} /*after*/

는 디바이더가되는 종속 바로 "프리 디바이더"클래스 중 하나, 또는 "분할"클래스를 적용 할 수 있습니다 첫 번째 요소 (따라서 앞에 아무 것도 없음).

출처

2011-08-25 13:39:12

도움 주셔서 감사합니다. 너무 나쁜 CSS는 이것을 지원하지 않습니다. 내가 지즐을 사용해서 할 수 있다면 어떨까요? – BenM

@BenM : Sizzle은 선행 형제 선택기를 제공하지 않지만 Sizzle과 함께 jQuery를 사용한다면'.prev()'및'.next()'메서드를 사용하여 이전 형제와 다음 형제를 찾을 수 있습니다 . 그가 말한 내용은 – BoltClock

입니다. xpath는이 모든 것을 할 수 있지만 불행하게도 xpath 선택자를 사용하여 스타일 시트를 지정할 수는 없으며 오직 CSS 만 사용 가능합니다. ( –

.divider + li<li>에서 .divider으로 이니셜을 선택하십시오.

는 이전 일에 관해서는, 나는 이것이 가능하지 (내가 틀렸다면 수정하시기 바랍니다)

출처

2011-08-25 13:38:30

다른 요소 바로 앞과 뒤의 요소에 스타일 정의 CSS

답변

관련 문제