css: selector notes

2 files changed, 55 insertions, 0 deletions

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
+```