From 11eebd33aa0ca9b87068b82b5d6f78537b95e4ba Mon Sep 17 00:00:00 2001
From: Johannes Stoelp <johannes.stoelp@gmail.com>
Date: Thu, 9 Nov 2023 21:12:17 +0100
Subject: css: selector notes

---
 src/web/README.md |  1 +
 src/web/css.md    | 54 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 55 insertions(+)
 create mode 100644 src/web/css.md

(limited to 'src/web')

diff --git a/src/web/README.md b/src/web/README.md
index e189f9e..acaa58d 100644
--- a/src/web/README.md
+++ b/src/web/README.md
@@ -1,4 +1,5 @@
 # Web
 
 - [html](./html.md)
+- [css](./css.md)
 - [chartjs](./chartjs.md)
diff --git a/src/web/css.md b/src/web/css.md
new file mode 100644
index 0000000..b1c8fd4
--- /dev/null
+++ b/src/web/css.md
@@ -0,0 +1,54 @@
+# css
+
+## selector
+
+`.moose` element with class
+```html
+<div class = "moose"></div>  // selected
+<div class = "bar"></div>    // NOT selected
+```
+
+`.moose.bar` element with multiple classes
+```html
+<div class = "moose bar"></div>  // selected
+<div class = "bar"></div>        // NOT selected
+```
+
+`.moose .bar` descendant element with classes
+```html
+<div class = "moose">
+    <div class = "bar"></div>  // selected
+</div>
+<div class = "bar"></div>      // NOT selected
+```
+
+`p` specific element
+```html
+<p></p>      // selected
+<div></div>  // NOT selected
+```
+
+`p.bar` specific element with class
+```html
+<p class = "bar"></p>  // selected
+<p class = "foo"></p>  // NOT selected
+```
+
+`p,div` any element
+```html
+<p></p>      // selected
+<div></div>  // selected
+<a></a>      // NOT selected
+```
+
+`div p` descendant element of other element
+```html
+<div><p></p></div>           // selected
+<div><ul><p></p></ul></div>  // NOT selected
+```
+
+`div > o` direct descendant element of other element
+```html
+<div><p></p></div>           // selected
+<div><ul><p></p></ul></div>  // NOT selected
+```
-- 
cgit v1.2.3