Selector when there is only one child in the parent

Question

I play with CSS selectors, and I wonder if I can create my own css selector just for work, if only one of the classes .widget-button, example code;

<div class='container a'>
  <div class='widget-a' />
  <div class='widget-b' />
  <div class='widget-button' /> 
  <div class='widget-b' />
</div>

So, would you suggest that theres is a combination of pseudo selectors ( :only-child ?) for this job that will work for the above? If none of the examples below required selection / styles applied as more than one class.

<div class='container b'>
  <div class='widget-a' />
  <div class='widget-b' />
  <div class='widget-button' />
  <div class='widget-z' />
  <div class='widget-x' />
  <div class='widget-button' />
  <div class='widget-z' />
</div>

Here's JSFiddle https://jsfiddle.net/2L593m3x/

Answer 1

css ,

: .

, nth-of-class.

nth-of-class.

.

.

class.

---

- nth-match ( ):

.

.widget-button:nth-match(2n+1)
.widget-button:first-match
.widget-button:last-match
.widget-button:only-match

Answer 2

, , , :

• .

• .

  .container > .widget-button:nth-child(1):last-child

Answer 3

:

p:has(br:first-child:last-child)

p:has(br:only-child)