CODEWITHSUNDEEP
csscss-selectors
edbras
edbras

Reputation: 4404

set only the css style of first adjacent div with a class name

How can I set the style of only the first div that has class "bla"? (not the second).

<div class="outer">
  <div>
    ....(more div's, unknown how many)
      <div class="bla">
        ....
        <div class="bla">some content</div>
      </div>

    ....
  </div>
</div>

Upvotes: 1

Views: 709

Answers (4)

n1xx1
n1xx1

Reputation: 2076

You can do simple workaround for this since you can't do that with any special selector:

.bla {
    /* style here, example: */
    background-color: #f00;
}
.bla .bla {
    /* negate the style, example: */
    background-color: transparent;
}

I hope this is what you were looking for.

Upvotes: 1

Jonathan
Jonathan

Reputation: 9151

Javascript:

getElementsByClass('bla')[0].style

EDIT: JOPLOmacedo provided a CSS only (better) answer

I've also found a way to select for instance the second <p> after a <h1> tag:

h1 + p + p{
 background: red;
}

Just thought I'd share that.

Upvotes: 0

Paulo R.
Paulo R.

Reputation: 15609

I'm assuming with this answer that by adjacent elements you mean sibling elements. If you were referring to parent-child elements then go with N1xx1's answer. That being said...

You can't target the first bla with css selectors alone. But you can target all the blas but the first. So, one possibility is to set the styles you want only on the first bla on all blas. Then override those styles by targeting all blas but the first. Like so:

.bla {
   ...styles for the first bla..
}

.bla ~ .bla {
   ...override styles set on first bla that you dont want on the others
}

The tilde between the two ".bla"'s is called the general sibling selector. If you've never heard of it, head on over to css selectors spec.

Upvotes: 2

waldol1
waldol1

Reputation: 1881

According to pure css, you can't select according to the ordering of the html elements. Search the spec (here: http://www.w3.org/TR/CSS2/selector.html). There is nothing that refers to how many or in what order html elements match the given selectors.

Upvotes: 0

Related Questions