[css/en] add more css3 features (#4907)

1 files changed, 47 insertions, 0 deletions

diff --git a/css.html.markdown b/css.html.markdown
index 948b70ac..2d9add84 100644
--- a/css.html.markdown
+++ b/css.html.markdown
@@ -69,6 +69,9 @@ div { }
 /* or ends with a value (CSS 3) */
 [attr$='ue'] { font-size:smaller; }
 
+/* or contains a value (CSS 3) */
+[attr*='foo'] { }
+
 /* or contains a value in a space-separated list */
 [otherAttr~='foo'] { }
 [otherAttr~='bar'] { }
@@ -125,6 +128,9 @@ selector:first-child {}
 /* any element that is the last child of its parent */
 selector:last-child {}
 
+/* Select the nth child of selector parent (CSS 3) */
+selector:nth-child(n) { }
+
 /* Just like pseudo classes, pseudo elements allow you to style certain parts of
     a document  */
 
@@ -144,6 +150,12 @@ selector::after {}
    in the group */
 selector1, selector2 { }
 
+/* Select elements that do not have a certain state (CSS 3) */
+/* Here, we select div with no id attribute. */
+div:not([id]) {
+   background-color: red;
+}
+
 /* ####################
    ## PROPERTIES
    #################### */
@@ -196,6 +208,41 @@ selector {
     /* if the first one is not found, the browser uses the next, and so on */
     font-family: "Courier New", Trebuchet, Arial, sans-serif;
 }
+
+/* Custom CSS properties using variables (CSS 3) */
+:root {
+   --main-bg-color: whitesmoke;
+}
+body {
+   background-color: var(--main-bg-color)
+}
+
+/* Perfom a calculation (CSS 3) */
+body {
+   width: calc(100vw - 100px)
+}
+
+/* Nest style rule inside another (CSS 3) */
+.main {
+   .bgred { /* same as: .main .bgred { } */
+      background: red;
+   }
+   & .bggreen { /* same as: .main .bggreen { } */
+      background: green;
+   }
+   &.bgblue { /* (without space) same as: .main.bgblue { } */
+      background: blue;
+   }
+}
+
+/* Design responsive layout using flexbox (CSS 3) */
+.container {
+   display: flex;
+   flex-direction: row;      /* in which direction stack the flex items */
+   flex-wrap: wrap;          /* whether or not flex items should wrap */
+   justify-content: center;  /* how to align flex items horizontally */
+   align-items: center;      /* how to align flex items vertically */
+}
 ```
 
 ## Usage