CSS Adjacent to target :first-child

[Kushal Jayswal]

Assume a table with two rows only.

So first tr will be tr:first-child and last will be tr:last-child.
First td of each tr has a dropdown. Dropdown is a UL with class dropdown. We have saperate CSS written for tr:last td .dropdownto get dropdown well positioned if we have only two rows in a table. And we cannot remove overflow: hidden from the parent.

Now I want to write CSS using adjacent as per below need.
– If there is a table with two TRs (first and last child) then dropdown should have position from bottom as below snippet.

Sample

/* tr:first-child + tr:last-child then */

tr:first-child td .dropdown{
    left: 50px;
    bottom: 50px;
}

Is it possible? I don’t want to use script for such a thing.

Thanks in advance.

[Beverleyh]

It’s difficult to visualise what you’re describing. Can you provide a reduced demo in CodePen?

[Kushal Jayswal]

Codepen:

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

Here we have a CSS for tr:last-child .setting .dropdown. The same way I want to add CSS if below condition match, BUT USING CSS…

My requirement can be coded using code:

if($('tr:first-child + tr:last-child')){
    $('tr:first-child .setting .dropdown ').css({
        'left': '20px';
        'top': '0';
    });
}

The question is – Is above conditional thing possible using only CSS?

Thanks.

[Author]

Posts