2013-05-03 2 views
0

클래스가 "테스트 - 클래스"인 하위 클래스가있는 div를 모두 선택하려면 어떻게해야합니까?"test-class"클래스의 하위 클래스가있는 div를 모두 선택하는 방법은 무엇입니까?

와우, Is there a CSS parent selector?의 중복으로 표시됩니다. 나는 그 질문을 읽고이 질문은 정말로 중복된다. 그러나 나는 그녀가/내가 나의 제목에서 묘사 된 것을하고 싶다면 아무도 그 나쁜 제목의 질문을 찾을 수 없을 것이라고 생각한다.

1) CSS 부모의 선택을 가지고 있지만 우리는 CSS 아이 선택은 거기에 뭔가 다른

2) 그 질문의 제목이 될 것에서 찾고있다?

+1

명확히 말하면 .test-class 요소의 부모를 선택하려고합니까? –

+0

나는 당신이 할 수 있다고 생각하지 않는다 – Morpheus

+4

당신은 평범한 CSS로 이것을 할 수 없다. Javascript를 사용하면 할 수 있습니다. –

답변

3

편집 : 독자의 명확성을 위해, 원래의 질문은

는 어떻게 아이를 가지고 테스트 클래스 안에있는 모든 div를 선택할 수 있었다?

CSS에는 (아직) 학년 선택기 또는 이전 형제 선택기가 없기 때문에 할 수 없습니다.

에만

바로아래로, 더 위로 남아 있지 다음 형제 또는 어린이 (다음 자손) ... 타겟팅 할 수 있습니다.

CSS2 Selectors

CSS3 Selectors

CSS4 Selectors - Draft

: 참고로

은 공식 문서를 W3C를 참조 할 때 가능 ( read why를) W3 스쿨을 사용하고 선택기하지 마십시오

그리고 CSS4가 준비가되어있을 때 이제 문서화 할 것 같은 경우, 적절한 선택기이 될 것 할 : 한 F 요소의

E! > F

E 요소의 부모

선택자 + 아동 조합자 결정하기

그런 다음

와 같은 조합자를 만들 수 있습니다.
.test-class div! > * 

읽기로 : 안에 뭔가 (일부 아이들)이 있고 test-class

+0

W3C 또는 적어도 [MDN] (https://developer.mozilla.org/en-US/docs)을 지워서는 안됩니다./CSS). –

+0

@DerekHenderson 편집에서 제안한 자손을 추가했습니다. 다른 편집에는 유효하지 않습니다 ... AFAIK 인라인 요소를 인용 할 수있는 방법이 없으며, Code는 Bold imho보다 더 좋고 (덜 귀찮은) 강조 표시입니다. 마지막으로, 게시물의 두 번째 부분을 모두 삭제했습니다./ –

+0

@ 안드레아 리지 오스 (Anandrea Ligios) : 의견이 어떻든간에 코드가 아닌 것을 강조 표시하기 위해 코드 표식을 사용하는 것은 잘못된 것입니다. 코드 블록에 대한 견적을 사용하거나 견적을위한 코드 블록을 사용합니다. 굵게/기울임 꼴이 너무 강조되면 강조 표시하지 마십시오. – BoltClock

-2

의 후손 당신은 번호로 부모 DIV ("테스트 클래스")의 차일을 선택할 수있는 모든 DIV. 그래서 모든 첫번째 차일을 선택합니다 :

.text-class:nth-child{/*code*/} 

는 확실히 모든 하위 div의이 선택되고 있음을 (내가 가장 차일과는 .text 수준의 사업부만큼 할 것) :

.text-class:nth-child, .text-class:nth-child(2), 
.text-class:nth-child(3), .text-class:nth-child(4){/*code*/} 

Btw는 목록에 있었으므로 앞으로 나올 수 있기를 바랍니다.

+0

': nth-child'가 유효하지 않거나, : first-child' 또는': nth-child (1)'을 의미합니까? – BoltClock

관련 문제