Search code examples
javascriptcssantd

Visually hide last span inside of a class

I am utilizing ANTD checkbox group and the designs I am working with do not show the label next to the checkbox. I have temporarily added a solution that uses JavaScript to dynmaically add a class to the last child node. But I can't seem to figure out a way to hide the nested span inside of a label without JavaScript. I tried using last-of-type, last-child, nth-child etc... but apparently I suck at targeting the last span of a class. Any advice and or assistance would be greatly appreciated.

ANTD's produced code - the span highlighted is what I am trying to visually hide:

enter image description here

Solution

  • As Barmar pointed out in the comments, you want to use :last-child. However, his code uses the wrong class name. Here's a full demo of what you can do:

    label.ant-checkbox-wrapper > span:last-child {
  display: none
}
    <h1>Example</h1>
<label class="ant-checkbox-wrapper">
  <span>Span 1</span>
  <span>Span 2</span>
</label>