chap4 complete

css - the complete guide/3. diving_deeper.md

@@ -243,7 +243,7 @@ The brand text and nav are now not vertically aligned because of the increased f
 ```css
 .main-header > div {
     display: inline-block;
-    vertical-align: middle;     // BRAND TEXT CONTAINER
+    vertical-align: middle;     /* BRAND TEXT CONTAINER */
 }
 
 .main-header__brand {
@@ -257,7 +257,7 @@ The brand text and nav are now not vertically aligned because of the increased f
     display: inline-block;
     text-align: right;
     width: calc(100% - 74px);
-    vertical-align: middle;     // NAV BAR CONTAINER
+    vertical-align: middle;     /* NAV BAR CONTAINER */
 }
 
 .main-nav__items {
@@ -328,7 +328,7 @@ We can group or combine multiple rules with same code into one to increase reusa
     color: white;
 }
 
-// CAN BE WRITTEN AS
+/* CAN BE WRITTEN AS */
 
 .main-nav__item a:hover,
 .main-nav__item a:active {

css - the complete guide/4. more_on_selectors_and_css_features.md

@@ -0,0 +1,70 @@
+# More On Selectors And CSS Features
+
+## Using Multiple CSS Classes And Combined Selectors
+
+We can apply multiple classes to an element separated by a space:
+
+```html
+<div class="class1 class2">
+```
+
+If both classes happen to apply a same property, than the order rule will apply, that is the order of the declaration of the classes in the css file, and not the order of the classes in the `class` attribute.
+
+We can use a combined selector to apply rules to an element with class name, like the following rules applies to any anchor tag that has `class="active"`.
+
+```css
+a.active { 
+    ...
+}
+```
+
+Combined selectors are not limited to tags and classes, you can also have IDs and classes followed by a class etc.
+
+
+## Classes Or IDs
+
+| Class Selectors | ID Selectors |
+| .some-class { ... } | #some-id { ... } |
+| <div class="some-class"></div> | <div id="some-id"></div> |
+| Re-usable | Only used once per page |
+| Allow you to **mark** and name things for styling purposes only | Also go non-CSS meaning (e.g. on-page link) |
+| Most-used selector type | Use if available anyways |
+
+
+## (Not) Using `!important`
+
+Adding `!important` annotation to a property overwrites specifity and all other selectors.
+
+```css
+div {
+    color: red !important;
+}
+```
+
+Therefore, In general you shouldn't use `!important`, and use specifity and rules to style the website according to your needs.
+
+
+## Selecting The Opposite With `not()`
+
+This is an interesting pseudo class because it allows us to basically reverse a certain rules or exclude a certain selector.
+
+```css
+/* Selects any element that is NOT a paragraph */
+:not(p) {
+    color: blue;
+}
+
+/* Selecting any anchor tag that is NOT having the .active class */
+a:not(.active) {
+    color: blue;
+}
+```
+
+Use `not()` with caution, but there can be situations where it allows you to achieve exactly what you want.
+
+
+## CSS And Browser Support
+
+Whenever you use a certain feature of CSS, you have to check if the browsers of your target audience supports that feature otherwise you can't use it. On **MDN** you can find the browser support on the end of every feature page.
+
+You can also use [caniuse.com](caniuse.com).