XF 2.1 Change the radius of a button after removing the button next to it

[gogo]

So after I've hidden the 'Mark read' button by making it as 'display:none;' how do I make the Unwatch/Watch button round cornered?

I've tried:

.button--link[href*="watch"]  {
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}

Nothing happened.

 

[kick]

.button--link[href*="read"] .button-text {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

 

[gogo]

No. I want to hide Mark read, i.e.

.button--link[href*="mark-read"]  {
  display: none;
}

This is done. Mark read is gone.

And then I want to make the corners of Watch/Unwatch button round.

The following code doesn't work.

.button--link[href*="watch"] .button-text {
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}

nor

.button--link[href*="watch"] {
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}

 

[kick]

.buttonGroup
{
    > .button
    {
        &.button--link[href*="watch"] {
            &:last-child:not(:first-child)
            {
                border-top-left-radius: 4px;
                border-bottom-left-radius: 4px;
            }
        }
    }
}

or you can use this and xf function.

.buttonGroup
{
    > .button
    {
        &.button--link[href*="watch"] {
            &:last-child:not(:first-child)
            {
                .m-borderLeftRadius(4px);
            }
        }
    }
}

 

[gogo]

Thanks. I tried both codes, neither works.

 

[kick]

Well, correctly, it will not work for you. Another 1 button is added and it is not the last element.

 

[gogo]

Got it done by making a little change to your code.

.buttonGroup
{
    > .button
    {
        &.button--link[href*="watch"] {
            &:not(:last-child):not(:first-child)
            {
                .m-borderLeftRadius(4px);
            }
        }
    }
}

Thanks a lot!

 

[kick]

In order not to do such checks, there is a pseudo-class :nth-child

:nth-child() - CSS: Cascading Style Sheets | MDN

The :nth-child() CSS pseudo-class matches elements based on the indexes of the elements in the child list of their parents. In other words, the :nth-child() selector selects child elements according to their position among all the sibling elements within a parent element.

developer.mozilla.org