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

Home Forums CSS CSS Adjacent to target :first-child

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #209289
    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.


    /* 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.


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

    Kushal Jayswal


    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?


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