Using an Element’s Child Elements

No browsers allow you to apply styles to an element based on the number of child elements if contains. The :has() selector would in theory, but since it has been Adopted into the CSS spec zero browsers have offered any support for it.

Thankfully even though CSS has no knowledge of the number of children an element has, both JavaScript and XPath are aware of this and are able to let you use this knowledge for resolving selectors.

Parts Required

JS Tests

Counting Children:

element.children.length

Counting Tags:

element.getElementsByTagName('*').length

Plugins Capable

Syntax Examples

CSS (valid, but 0% browser support)

:has(:nth-of-child(5)) {
  background: lime;
}

EQCSS

@element .min-children and (min-children: 5) {
  $this {
    background: greenyellow;
    border-color: limegreen;
  }
}

@element .max-children and (max-children: 5) {
  $this {
    background: greenyellow;
    border-color: limegreen;
  }
}

Selectory

.min-children[test="this.children.length > 3"] {
  background: lime;
}

.max-children[test="this.children.length < 3"] {
  background: lime;
}

XPathy

/* min-children: 3 */
[xpath="//ul[*[3]]"] {
  background: violet;
}

/* max-children: 3 */
[xpath="//ul[not(*[3])]"] {
  color: lime;
}

Demos

Further Reading