Kevin Powell - Community•2y ago

how to change display direction depend of child of container

how to change display direction depend of child of container for example if have 3 childs display direction unset if not display direction : column

2 Replies

MarkBoots•2y ago

its not fully supported in all browsers yet. but with the :has() selector you can check if nth-child(3) excists for example

.container {
  display: flex;
}
.container:has(>.item:nth-child(3)) {
  flex-direction: column
}

.container {
  display: flex;
}
.container:has(>.item:nth-child(3)) {
  flex-direction: column
}

Jochem•2y ago

mind if I ask why you want to do this? It sounds like something that could potentially be solved in a better way (what Mark said works fine, btw, but yeah, no full browser support just yet https://caniuse.com/css-has)

Gaming

Programming

how to change display direction depend of child of container