29 lines
660 B
HTML
29 lines
660 B
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
/* Child selector - only matches direct children */
|
|
.parent > .direct-child {
|
|
background-color: blue;
|
|
}
|
|
|
|
/* Descendant selector - matches any descendant */
|
|
.parent .any-descendant {
|
|
background-color: green;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="parent">
|
|
<div class="direct-child">Direct child (should be blue)</div>
|
|
<div class="wrapper">
|
|
<div class="direct-child">NOT a direct child of .parent (no blue)</div>
|
|
</div>
|
|
<div class="any-descendant">Direct descendant (green)</div>
|
|
<div class="wrapper">
|
|
<div class="any-descendant">Nested descendant (also green)</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|