Skip to content

Instantly share code, notes, and snippets.

@a2sc

a2sc/css-pseudo-classes-is-and-where.html

Created March 18, 2024 11:02
Show Gist options
  • Save a2sc/d81430eb56cde50192352a8d8fd5515d to your computer and use it in GitHub Desktop.
Save a2sc/d81430eb56cde50192352a8d8fd5515d to your computer and use it in GitHub Desktop.
Download ZIP
CSS Pseudo Classes :is and :where
Raw
css-pseudo-classes-is-and-where.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>CSS Pseudo Classes :is and :where</title>
<style>
/* OLD CSS
header p:hover,
main p:hover,
footer p:hover {
color: green;
cursor: pointer;
}
*/
:is(header, main, footer) p:hover {
color: green;
cursor: pointer;
}
p:hover {
color: red; /* not applied after :is */
}
:where(header, main, footer) li:hover {
color: green;
cursor: pointer;
}
footer li:hover {
color: red; /* applied after :where */
}
</style>
</head>
<body>
<header>
<p>This is header content</p>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</header>
<main>
<p>This is main content</p>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</main>
<footer>
<p>This is footer content</p>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment