On gists

Has (:has selector)

CSS Web components CSS trick

hover-group.css Raw #

/*

https://www.matuzo.at/blog/2022/100daysof-day50/

*/

table:has(input:focus) tr:not(:focus-within) {
	opacity: 0.1;
}

/* siblings but not me */
.gallery:has(img:hover) > img:not(:hover) {
  /* rule */
}


/* has both, video + h2 */
post:has(h2):has(video) {
	
}


/* has video or h2 or both*/
post:has(h2, video) {
	
}


/* has only video */
post:has(video) {
	
}

/* has not video
do not use!!!  post:has(:not(video)  # post that has any element that is not a video
*/
post:not(:has(video)) {

}


/* previous element */
span:has(+ post) {
	color: red;
}

/* more or equals 4 children = quantity query */
post:has(> *:nth-child(4n)) {

}


/*
https://jsbin.com/mafuhoquka/edit?html,css,output

<article>
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
		<div>5</div>
		<div>6</div>
		<div>7</div>
		<div>8</div>
		<div>9</div>
		<div>10</div>
</div>

/* prev */
article div:has(+ :hover) {
	background: pink;
}

/* next */
article div:hover + div {
	background: lime;
}


/* prev all */
article div:has(~ :hover) {
	background: pink;
}

/* next all */
article div:hover ~ div {
	background: lime;
}

/* https://bejamas.io/blog/learn-css-has-selector-by-examples-top-use-cases/ */
/* At most 3 (3 or less, excluding 0) children */
ul:has(> :nth-child(-n+3):last-child) {
	outline: 1px solid red;
}

/* At most 3 (3 or less, including 0) children */
ul:not(:has(> :nth-child(3))) {
	outline: 1px solid red;
}

/* Exactly 5 children */
ul:has(> :nth-child(5):last-child) {
	outline: 1px solid blue;
}

/* At least 10 (10 or more) children */
ul:has(> :nth-child(10)) {
	outline: 1px solid green;
}

/* Between 7 and 9 children (boundaries inclusive) */
ul:has(> :nth-child(7)):has(> :nth-child(-n+9):last-child) {
	outline: 1px solid yellow;
}



/* ranges */
/*
<div>
  <h2>Start Title (First line green, last line red)</h2>
  <p>First line between h2</p>
  <h4>Second line between h2</h4>
  <h5>Last line between h2</h5>
  <h2>End Title</h2>
</div>
*/

/* Select the first line between h2 */
h2 + :has(~ h2) {
  color: green;
}

/* Select the last line between h2 */
h2 ~ :has(+ h2) {
  color: red;
}
/* Select all lines between h2 */
h2 ~ :has(~ h2) {
  font-style: italic;
}



/* 'And' operation: selects <p> elements containing both class 'a' and 'b' children */
p:has(.a):has(.b) {
  font-weight: bold;
}

/* 'Or' operation: selects <p> elements containing either class 'a' or 'b' children */
p:has(.a, .b) {
  font-style: italic;
}


/* Select all parent elements containing a <p> element */
:has(p) {
  background-color: lightblue;
}

/* Select parent elements with a direct child <p> element */
:has(> p) {
  border: 1px solid red;
}
/* Select <div> elements with a direct child <p> element */
div:has(> p) {
  padding: 10px;
}
/* Select the adjacent previous <div> sibling of a <p> element */
div:has(+ p) {
  margin-bottom: 20px;
}
/* Select all previous <div> siblings of a <p> element */
div:has(~ p) {
  color: green;
}