CODEWITHSUNDEEP
htmlcsscss-selectors
Karan
Karan

Reputation: 3328

First child selection on DIV is not working

Please find the below JSfiddle link. I am trying to hide the first DIV child (with aaaaaa value) inside the div with the attribute aria-labelledby value.

But i think i made some mistake in the CSS syntax.

Please suggest.

http://jsfiddle.net/5g7ot5qf/

div[aria-labelledby="ui-dialog-title-timeout-dialog"]:first-child {
    display:none;
}

HTML Code:-

<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>

<div aria-labelledby="ui-dialog-title-timeout-dialog">
  hello
      <div>aaaaaa</div>
    <div>X2</div>
    <div>X3</div>
</div

Upvotes: 1

Views: 222

Answers (4)

meuwka
meuwka

Reputation: 139

It will be better to use http://caniuse.com/#search=first-of-type

div[aria-labelledby="ui-dialog-title-timeout-dialog"] > div:first-of-type

Because if you put the text "hello" in some tag

<h1>hello</h1>

then :first-child will not work

http://jsfiddle.net/kxhk83um/

Upvotes: 0

dingo_d
dingo_d

Reputation: 11670

If you want the div with aaaaa content gone use 

div[aria-labelledby="ui-dialog-title-timeout-dialog"] > div:first-child {
    display:none;
}

If you want all div's gone, but hello there use 

div[aria-labelledby="ui-dialog-title-timeout-dialog"] > div {
    display:none;
}

If you want to target divs, use

div[aria-labelledby="ui-dialog-title-timeout-dialog"] > div:nth-child(n) {
    display:none;
}

Where n is the div you want to hide (n=1,2,3,...)

EDIT: A fiddle: http://jsfiddle.net/wh3d3dtj/

Upvotes: 1

Barry
Barry

Reputation: 3723

use div[aria-labelledby="ui-dialog-title-timeout-dialog"]>div:first-child as the selector

the >div is added

Upvotes: 2

Matthias
Matthias

Reputation: 637

http://jsfiddle.net/5g7ot5qf/2/

it must be:

div[aria-labelledby="ui-dialog-title-timeout-dialog"] div:first-child {
    display:none;
}

Have a look at: https://developer.mozilla.org/en/docs/Web/CSS/:first-child

Upvotes: 4

Related Questions