3 files changed, 56 insertions, 0 deletions
diff --git a/src/SUMMARY.md b/src/SUMMARY.md
index a17f1ca..79af5fc 100644
--- a/src/SUMMARY.md
+++ b/src/SUMMARY.md
@@ -70,6 +70,7 @@
 
 - [Web](./web/README.md)
     - [html](./web/html.md)
+    - [css](./web/css.md)
     - [chartjs](./web/chartjs.md)
 
 - [Arch](./arch/README.md)
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
+```