diff options
| author | Johannes Stoelp <johannes.stoelp@gmail.com> | 2023-11-09 21:12:17 +0100 |
|---|---|---|
| committer | Johannes Stoelp <johannes.stoelp@gmail.com> | 2023-11-09 21:12:17 +0100 |
| commit | 11eebd33aa0ca9b87068b82b5d6f78537b95e4ba (patch) | |
| tree | 74fbb6cf6409a2089f63a79ff5cb067d0b67e234 | |
| parent | 1b0c020d818e90cad5325af15acffb754dcf041b (diff) | |
| download | notes-11eebd33aa0ca9b87068b82b5d6f78537b95e4ba.tar.gz notes-11eebd33aa0ca9b87068b82b5d6f78537b95e4ba.zip | |
css: selector notes
| -rw-r--r-- | src/SUMMARY.md | 1 | ||||
| -rw-r--r-- | src/web/README.md | 1 | ||||
| -rw-r--r-- | src/web/css.md | 54 |
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 +``` |