0

How can one select all divs which have a child whose class is "test-class"?

Wow, this marked as duplicate of Is there a CSS parent selector?. I read that question and this question is really a duplicate... however, I and I suppose no one will find that badly titled question if she/wants to do what I am described in my title.

1) CSS has parent selector but we are seeking from something else

2) That question title would be Is there a CSS child selector?

Community
  • 1
  • 1
g.pickardou
  • 32,346
  • 36
  • 123
  • 268
  • 1
    To be clear, are you trying to select the parent of the .test-class element? – Magnus Magnusson May 03 '13 at 14:07
  • I don't think you can – Morpheus May 03 '13 at 14:09
  • 4
    You can't do this with plain CSS, though. With Javascript, you'd be able to. – Elliot Bonneville May 03 '13 at 14:09
  • A child..."what" (i.e. a child class, a child div element, a child...) once you know what that is, then use jquery to find the locatons and attack. – klewis May 03 '13 at 14:16
  • 1
    Yes, you can do it, just wait 1-2 year for CSS4. – dfsq May 03 '13 at 14:16
  • @dfsq: Funny how there is a lingering misconception about CSS 4 .. CSS 3 is the final version – Adrift May 03 '13 at 14:19
  • 1
    @Adrift Yes, and HTML4 was final too. – dfsq May 03 '13 at 14:21
  • It's not entirely clear what you're asking. Please add some HTML to the question, showing an example of an element you'd like to select. – Matt Coughlin May 03 '13 at 14:21
  • @DerekHenderson you have totally changed the question; we should ask the OP if what you've written is really what he was asking. The original question was "Targeting all DIVS inside a test-class with at least a son". Please watch your edits carefully... – Andrea Ligios May 03 '13 at 14:29
  • @AndreaLigios, are you sure? I initially posted an answer to this (which I deleted), to which I received comments that I was answering the wrong question and that the question is what I have edited it to. All I did was change the word "in" to "of" and removed the w3schools link. Clearly someone agreed with my edit or it would not have passed peer review. – Derek Henderson May 03 '13 at 14:33
  • 1
    @dfsq: What does HTML have to do with CSS? Adrift is right, "CSS4" is just a misnomer for "a level 4 CSS module", while "CSS3" is either a misnomer for "a level 3 CSS module", or an umbrella term for everything beyond CSS2. Anyway, given recent changes, you may not even be able to do this in CSS with a level 4 selector anymore - see my comment on the accepted answer in the duplicate link. – BoltClock May 03 '13 at 14:36
  • @DerekHenderson yeah I saw your answer, but who commented it saying you was wrong ? Not the OP, but some other guy that probably hadn't understood the question himself :) You should have not erased your imho – Andrea Ligios May 03 '13 at 14:51

2 Answers2

3

EDIT: for clarity of the readers, the original question was

How can one select all divs that are inside a test-class and which have a child ?

You can't, because in CSS there are not (yet) Parent Selector nor Previous Sibling Selector.

You can only target Next Siblings or Childrens (and then Descendants)...

only right and down, no left and up.

As a note, please do not use W3SChools when possible (read why), and for Selectors refer to W3C Official Documentation:

CSS2 Selectors

CSS3 Selectors

CSS4 Selectors - Draft

And when CSS4 will be ready, if it will be like documented now, the proper Selector to do this will be:

E! > F

an E element parent of an F element

Determining the subject of a selector + Child combinator

Then you will be able to craft a combinator like

.test-class div! > *

read as: every DIV that have something inside (some children) and is descendant of test-class

Community
  • 1
  • 1
Andrea Ligios
  • 49,480
  • 26
  • 114
  • 243
  • W3C or at least [MDN](https://developer.mozilla.org/en-US/docs/CSS). – David Thomas May 03 '13 at 14:20
  • @DerekHenderson Added Descendants as suggested by the Edit. For the other edits, they was invalid... there is no way to quote elements inline AFAIK, and Code is a better (and less annoying) higlighter than Bold imho. Finally, you was deleting all my second part of the post :/ – Andrea Ligios May 03 '13 at 14:26
  • @Andrea Ligios: Whatever your opinion may be, it is simply **wrong** to use code markdown for highlighting things that are not code, much like it is wrong to use a quotation for a code block, or a code block for a quotation. If bold/italics are too much emphasis, don't highlight at all. – BoltClock May 03 '13 at 14:54
  • @Derek Henderson: Usually, where backticks are being used for highlighting things that are not code it is sufficient to remove them completely, as I have just done. – BoltClock May 03 '13 at 14:58
  • @BoltClock , you should have told me that 400 answers ago :D I will use bold ;) – Andrea Ligios May 03 '13 at 15:01
  • Sorry to say but my question was not _ever_ as "How can one select all divs that are inside a test-class and which have a child ?" The only thing I edited in the _title_ was deleteing the gt and lt signs around the div – g.pickardou May 03 '13 at 16:10
-2

You can select the childs of the parent-div ("test-class") by number. So to select all the first childs:

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

To be sure that all the child divs are being selected (I would do as much as the .text-class div with the most childs):

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

Btw it was in the list, hope its going to work for you!

Per Seter
  • 43
  • 5