Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › Pure CSS-alternative for selecting preceding sibling element?

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • December 12, 2016 at 3:10 pm #248934
    Anne1983
    Participant

    What I try to achieve sound at first rather simple. I would like to select the first Div in a list of Divs. All Divs have exactly the same markup, which I can’t manipulate. I am only allowed to manipulate stylesheets. No Div have an Id, but each one one of them have the same classes.

    I want to select the first Div with class=”card” in case 1. This should happen only on one page, where Div class=”card” is followed by Div class=”dropdown”. The first Div class=”card” in case 2 on a second page should remain untouched.

    The only thing I can come up with is select Div with class=”dropdown” and go to the preceding sibling. But since this is not possible, I would like to know if the community has another answer for me? Thank you!

    In case 1 it goes like (here I want to select only the first Div):

    <div class="container" >
    <div class="card" >...</div>
    <div class="dropdown" >...</div>
    <div class="card" >...</div>
    <div class="card" >...</div>
    <div class="card" >...</div>
    </div>

    And in case 2 it is (this first Div should remain like it is):

    <div class="container" >
    <div class="card" >...</div>
    <div class="card" >...</div>
    <div class="card" >...</div>
    <div class="card" >...</div>
    <div class="card" >...</div>
    </div>

    December 12, 2016 at 3:54 pm #248935
    deb
    Participant

    .container .div:nth-child(2) , put numbers according to your choice, put 1 for first , put 2 for second and so on…

    cheeers

    December 13, 2016 at 1:01 am #248944
    Paulie_D
    Member

    Not possible with CSS unless the page has a single identifier.

    You will need javascript I suspect.

    December 13, 2016 at 2:37 am #248946
    kwerty
    Participant

    Hi,

    Not sure this is what you are looking for.

    Basically i’ve selected the [container elememt] that contains [dropdown] class and then i have targeted the first div with the className card.

    http://codepen.io/anon/pen/yVRLZa

    Thanks

    December 13, 2016 at 3:01 am #248948
    Paulie_D
    Member

    @kwerty.

    Unfortunately, the OP is referring to different pages…not multiple containers on the same page.

    As such, unless the page has a specific identifier, there is no way to do this with CSS.

    December 13, 2016 at 3:09 am #248949
    Paulie_D
    Member

    Jquery can do it…and I’ve cobbled something but I’m sure it can be done more efficiently.

    http://codepen.io/Paulie-D/pen/GNYgxJ

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.