Skip to content

Commit

Permalink
feat: added has pseudo-class to css slides
Browse files Browse the repository at this point in the history
  • Loading branch information
arestivo committed Feb 14, 2024
1 parent 087d9de commit a171a06
Showing 1 changed file with 25 additions and 1 deletion.
26 changes: 25 additions & 1 deletion markdown/css3.md
Original file line number Diff line number Diff line change
Expand Up @@ -478,7 +478,7 @@ p:empty

---

# Negation Pseudo-class
# Not Pseudo-class

Represents elements that **do not match** a list of selectors:<br><small>Negation pseudo-class selectors cannot be nested.</small>

Expand Down Expand Up @@ -506,6 +506,30 @@ section :not(article) p /* does not select the paragraph */

---

# Has Pseudo-class

Represents elements where any of the relative selectors passed as arguments match:<br><small>Also known as the "parent selector" because it allows you to select elements based on their descendants.</small>

```css
section:has(p) /* all sections that contain a paragraph */
h1:has(+ h2) /* a h1 that is followed by a h2 */
:has(p) /* any element that contains a paragraph */
```

Examples:

```html
<section> <!-- selected by :has(p) and section:has(p)-->
<article> <!-- selected by :has(p) -->
<p>The quick brown fox jumps over the lazy dog</p>
</article>
</section>
```

What about "`section :has(p)`"?

---

## Typographic Pseudo-elements

Select **parts** of elements based on their position in the element:
Expand Down

0 comments on commit a171a06

Please sign in to comment.