direct children css styles

dev-trackers · Jun 7, 2020 · 71cdfca · 71cdfca
1 parent 79f1680
commit 71cdfca
Show file tree

Hide file tree

Showing 106 changed files with 37 additions and 2 deletions.
diff --git a/CSS/BEM-Model.md b/CSS/BEM-Model.md
diff --git a/CSS/Bootstrap/Bootstrap-grid-system.md b/CSS/Bootstrap/Bootstrap-grid-system.md
diff --git a/CSS/Bootstrap/bootstrap-d-flex.md b/CSS/Bootstrap/bootstrap-d-flex.md
diff --git a/...ld-combinator-vs-Descendant-combinator.md → ...ld-combinator-vs-Descendant-combinator.md b/...ld-combinator-vs-Descendant-combinator.md → ...ld-combinator-vs-Descendant-combinator.md
@@ -12,7 +12,40 @@ It represents a p element that is a descendant of an li element; the li element
 
 So in the above **descendant** means an elmenent can be a child or grandchild or any level of nested child.
 
-#### The main point is **>** is the **child combinator** while A descendant combinator is whitespace that separates two compound selectors.
+#### The main point is **>** is the **child combinator**, which means it must be the direct child of a parent element. 
+#### Whereas a descendant combinator is whitespace that separates two compound selectors.
+
+### A good example from production grade real-life app - to declare the styles of a parent class with ALL its direct children to have this styles. A blanket declaration of capture all direct childrent with the "*"
+
+parent.component.scss
+
+```scss
+.parent-wrapping-class {
+  > * {
+    margin-right: 1rem
+    margin-bottom: 1.2rem
+    height: 3.571rem
+  }
+
+  > *:last-child {
+    margin-right: 0;
+  }
+}
+```
+
+Then the html will be like below, (this is an Angular .html file)
+
+```html
+<div class="parent-wrapping-class">
+    <child-component
+      [item]="data"
+      [disabled]="disabled"      
+    >
+    </child-component>
+</div>
+```
+
+So in the above case all the direct children of "parent-wrapping-class" will get the styles as delacred in the .scss file
 
 #### Descendant combinator
 

diff --git a/...ame-Chain-Selectors-dot-notation-V-Imp.md → ...ame-Chain-Selectors-dot-notation-V-Imp.md b/...ame-Chain-Selectors-dot-notation-V-Imp.md → ...ame-Chain-Selectors-dot-notation-V-Imp.md
diff --git a/CSS/SCSS/ampersand-in-scss.md b/CSS/SCSS/ampersand-in-scss.md
diff --git a/CSS/SCSS/mixin-basics.md b/CSS/SCSS/mixin-basics.md
diff --git a/CSS/box-Model.md b/CSS/box-Model.md
diff --git a/CSS/left-vs-margin-left.md b/CSS/left-vs-margin-left.md
diff --git a/CSS/not-pseudo-class-selector.md b/CSS/not-pseudo-class-selector.md
diff --git a/CSS/relative-positioning-basic-good-notes.md b/CSS/relative-positioning-basic-good-notes.md
diff --git a/CSS/rem-unit-basics-and-converting-px.md b/CSS/rem-unit-basics-and-converting-px.md
diff --git a/CSS/z-index.md b/CSS/z-index.md
diff --git a/Event-Loop-Asynchronous-setTimeout/Event-Loop-in-JS.md b/Event-Loop-Asynchronous-setTimeout/Event-Loop-in-JS.md
diff --git a/Event-Loop-Asynchronous-setTimeout/Event-Loop-vs-Thread-Pool-or-Worker-Thread.md b/Event-Loop-Asynchronous-setTimeout/Event-Loop-vs-Thread-Pool-or-Worker-Thread.md
diff --git a/Event-Loop-Asynchronous-setTimeout/setTimeout-Absolute-Basics.md b/Event-Loop-Asynchronous-setTimeout/setTimeout-Absolute-Basics.md
diff --git a/Event-Loop-Asynchronous-setTimeout/setTimeout-What-is-Asynchronous-Mechanism-GOOD.md b/Event-Loop-Asynchronous-setTimeout/setTimeout-What-is-Asynchronous-Mechanism-GOOD.md
diff --git a/Event-Loop-Asynchronous-setTimeout/setTimeout-basic-examples-async.js b/Event-Loop-Asynchronous-setTimeout/setTimeout-basic-examples-async.js
diff --git a/Event-Loop-Asynchronous-setTimeout/setTimeout-execution-stack-2.png b/Event-Loop-Asynchronous-setTimeout/setTimeout-execution-stack-2.png
diff --git a/Event-Loop-Asynchronous-setTimeout/setTimeout-execution-stack.png b/Event-Loop-Asynchronous-setTimeout/setTimeout-execution-stack.png
diff --git a/Event-Loop-Asynchronous-setTimeout/setTimeout-in-context-of-Asynchronous-Mechanism.md b/Event-Loop-Asynchronous-setTimeout/setTimeout-in-context-of-Asynchronous-Mechanism.md
diff --git a/Git-and-Github/Delete-Branch.md b/Git-and-Github/Delete-Branch.md
diff --git a/Git-and-Github/PR-Flow/Pull-Request-submit.md b/Git-and-Github/PR-Flow/Pull-Request-submit.md
diff --git a/Git-and-Github/PR-Flow/Pull-Requst-Steps-to-take-in-a-team-before-submitting-PR.md b/Git-and-Github/PR-Flow/Pull-Requst-Steps-to-take-in-a-team-before-submitting-PR.md
diff --git a/Git-and-Github/PR-Flow/git-squash-many-commits-to-a-single-one-before-PR.md b/Git-and-Github/PR-Flow/git-squash-many-commits-to-a-single-one-before-PR.md
diff --git a/Git-and-Github/git-rebase/git-rebase-4.png b/Git-and-Github/git-rebase/git-rebase-4.png
diff --git a/Git-and-Github/git-rebase/git-rebase-Resolving-merge-conflicts--Git-rebase.md b/Git-and-Github/git-rebase/git-rebase-Resolving-merge-conflicts--Git-rebase.md
@@ -28,6 +28,8 @@ And then continue the rebasing process
 
 `$ git rebase --continue`
 
+And in a single cycle of rebasing you may get these conflicts multiple times.
+
 #### Now most probably when you try to push to remote - you will be stopped from pushing to branch after rebase
 
 [stackoverflow.com/questions/15143042/cant-push-to-branch-after-rebase](https://stackoverflow.com/questions/15143042/cant-push-to-branch-after-rebase)

diff --git a/Git-and-Github/git-rebase/git-rebase.md b/Git-and-Github/git-rebase/git-rebase.md
@@ -13,7 +13,7 @@ git rebase dev
 
 **In most regular day-to-day cases (i.e. when I am rebasing on top of master), the commands will be**
 
-`git rebase dev`
+`git checkout dev`
 `git rebase master`
 
 As most of the cases on a regular day, I would have to rebase on top of master branch.

diff --git a/GraphQL/Why-GraphQL-What-is-GraphQL.md b/GraphQL/Why-GraphQL-What-is-GraphQL.md
diff --git a/GraphQL/graphQL-Schema.md b/GraphQL/graphQL-Schema.md
diff --git a/Javascript/ES6-Array-Helper-Methods/forEach-vs-map.md b/Javascript/ES6-Array-Helper-Methods/forEach-vs-map.md
diff --git a/Javascript/Null-Coalescing-operator.md b/Javascript/Null-Coalescing-operator.md
diff --git a/Javascript/OOP-Prototypal-Inheritence/Inheritence-OOP-Class-vs-Prototypes-Example-BEST.md b/Javascript/OOP-Prototypal-Inheritence/Inheritence-OOP-Class-vs-Prototypes-Example-BEST.md
diff --git a/Javascript/OOP-Prototypal-Inheritence/Inheritence-OOP-Class-vs-Prototypes-Theory.md b/Javascript/OOP-Prototypal-Inheritence/Inheritence-OOP-Class-vs-Prototypes-Theory.md
diff --git a/Javascript/OOP-Prototypal-Inheritence/OOP-Basics-1.md b/Javascript/OOP-Prototypal-Inheritence/OOP-Basics-1.md
diff --git a/.../OOP-Prototypal-Inheritence/OOP-Encapsulation-Theory-GOOD-Explanations-Private-Methods.md b/.../OOP-Prototypal-Inheritence/OOP-Encapsulation-Theory-GOOD-Explanations-Private-Methods.md
diff --git a/Javascript/OOP-Prototypal-Inheritence/OOP-Encapsulation-example-1.md b/Javascript/OOP-Prototypal-Inheritence/OOP-Encapsulation-example-1.md
diff --git a/Javascript/OOP-Prototypal-Inheritence/OOP-Encapsulation-example-2.md b/Javascript/OOP-Prototypal-Inheritence/OOP-Encapsulation-example-2.md
diff --git a/Javascript/OOP-Prototypal-Inheritence/OOP-basics-2.md b/Javascript/OOP-Prototypal-Inheritence/OOP-basics-2.md
diff --git a/Javascript/OOP-Prototypal-Inheritence/drawbacks-of-Classes-in-JavaScript.md b/Javascript/OOP-Prototypal-Inheritence/drawbacks-of-Classes-in-JavaScript.md
diff --git a/Javascript/OOP-Prototypal-Inheritence/how-to-get-prototype-of-an-object.md b/Javascript/OOP-Prototypal-Inheritence/how-to-get-prototype-of-an-object.md
diff --git a/Javascript/Tricky-JS-Problems/logical-and-operator.js b/Javascript/Tricky-JS-Problems/logical-and-operator.js
diff --git a/Javascript/Tricky-JS-Problems/plain-class-functions.js b/Javascript/Tricky-JS-Problems/plain-class-functions.js
diff --git a/Javascript/Tricky-JS-Problems/value-of-null.js b/Javascript/Tricky-JS-Problems/value-of-null.js
diff --git a/Javascript/arrow-function/arrow-function-and-this-keyword.md b/Javascript/arrow-function/arrow-function-and-this-keyword.md
diff --git a/Javascript/arrow-function/arrow-vs-regular-functions.md b/Javascript/arrow-function/arrow-vs-regular-functions.md
diff --git a/Javascript/call-apply-bind/bind-why-its-needed.md b/Javascript/call-apply-bind/bind-why-its-needed.md
diff --git a/Javascript/call-apply-bind/call-function-basics-1.md b/Javascript/call-apply-bind/call-function-basics-1.md
diff --git a/Javascript/const-var-let.md b/Javascript/const-var-let.md
diff --git a/Javascript/curried-function.md b/Javascript/curried-function.md
diff --git a/Javascript/js-basics/Closure/closure-tricky-GREAT-EXAMPLE.JS b/Javascript/js-basics/Closure/closure-tricky-GREAT-EXAMPLE.JS
diff --git a/Javascript/js-basics/Closure/closure-use-case-create-private-variable.js b/Javascript/js-basics/Closure/closure-use-case-create-private-variable.js
diff --git a/Javascript/js-basics/Closure/closure-why-its-needed.js b/Javascript/js-basics/Closure/closure-why-its-needed.js
diff --git a/...script/js-basics/Closure/closures-retains-values-of-outer-function-after-outer-returns.md b/...script/js-basics/Closure/closures-retains-values-of-outer-function-after-outer-returns.md
diff --git a/Javascript/js-data-types/BigInt-data-type.md b/Javascript/js-data-types/BigInt-data-type.md
diff --git a/Javascript/js-data-types/check-data-type-with-typeof.js b/Javascript/js-data-types/check-data-type-with-typeof.js
diff --git a/Javascript/js-data-types/data-types-Number-Famous-Question.md b/Javascript/js-data-types/data-types-Number-Famous-Question.md
diff --git a/Javascript/js-data-types/data-types-Number.md b/Javascript/js-data-types/data-types-Number.md
diff --git a/Javascript/js-data-types/data-types-symbol.md b/Javascript/js-data-types/data-types-symbol.md
diff --git a/Javascript/null-coalescing.jpeg b/Javascript/null-coalescing.jpeg
diff --git a/Javascript/rest-spread-destructuring/spread-operator-vs-rest-parameters.md b/Javascript/rest-spread-destructuring/spread-operator-vs-rest-parameters.md
diff --git a/Javascript/this-keyword/this-example-custom-Array-Prototype-method.md b/Javascript/this-keyword/this-example-custom-Array-Prototype-method.md
diff --git a/Javascript/this-keyword/this-keyword-2nd-example-GREAT-Example.md b/Javascript/this-keyword/this-keyword-2nd-example-GREAT-Example.md
diff --git a/Javascript/this-keyword/this-keyword-simplest-catagories.md b/Javascript/this-keyword/this-keyword-simplest-catagories.md
diff --git a/Javascript/truthy-falsy-2.md b/Javascript/truthy-falsy-2.md
diff --git a/Javascript/truthy-falsy-pass-by-value-vs-reference-strict-equality-use-case.js b/Javascript/truthy-falsy-pass-by-value-vs-reference-strict-equality-use-case.js
diff --git a/Javascript/truthy-falsy.js b/Javascript/truthy-falsy.js
diff --git a/Javascript/undefined-vs-not_defined.md b/Javascript/undefined-vs-not_defined.md
diff --git a/MongoDB/aggregation-in-mongodb.md b/MongoDB/aggregation-in-mongodb.md
diff --git a/MongoDB/indexing-in-mongo.md b/MongoDB/indexing-in-mongo.md
diff --git a/MongoDB/sharding-in-mongodb.md b/MongoDB/sharding-in-mongodb.md
diff --git a/Node-Express/bcrypt-manually-generate-a-salted-and-encrypted-password.md b/Node-Express/bcrypt-manually-generate-a-salted-and-encrypted-password.md
diff --git a/...ync-Await-Sequential-Execution/Promise-async-await-master-notes/Promise-all.jpg b/...ync-Await-Sequential-Execution/Promise-async-await-master-notes/Promise-all.jpg
diff --git a/...-Async-Await-Sequential-Execution/async-await-master-notes/async-await-absolute-basics.js b/...-Async-Await-Sequential-Execution/async-await-master-notes/async-await-absolute-basics.js
diff --git a/...ster-notes/setTimeout-rate-limiting-api-calls-IMP-with-async-await-looping-over-apis-1.js b/...ster-notes/setTimeout-rate-limiting-api-calls-IMP-with-async-await-looping-over-apis-1.js
diff --git a/...ster-notes/setTimeout-rate-limiting-api-calls-IMP-with-async-await-looping-over-apis-2.js b/...ster-notes/setTimeout-rate-limiting-api-calls-IMP-with-async-await-looping-over-apis-2.js
diff --git a/React/Hooks/Shallow-comparison-React-useEffect-compare-array-in-second-argument.md b/React/Hooks/Shallow-comparison-React-useEffect-compare-array-in-second-argument.md
diff --git a/React/Hooks/convert-ClassBasedForm-to-HooksBasedForm.md b/React/Hooks/convert-ClassBasedForm-to-HooksBasedForm.md
diff --git a/React/Hooks/lifeCycle-methods-for-various-hooks.md b/React/Hooks/lifeCycle-methods-for-various-hooks.md
diff --git a/React/Hooks/updateState-with-callback.md b/React/Hooks/updateState-with-callback.md
diff --git a/React/Hooks/useEffect-api-call-with-async-inside-useEffect.md b/React/Hooks/useEffect-api-call-with-async-inside-useEffect.md
diff --git a/React/Hooks/useEffect-async-call-inside.md b/React/Hooks/useEffect-async-call-inside.md
diff --git a/React/Hooks/useEffect-basics-1.md b/React/Hooks/useEffect-basics-1.md
diff --git a/.../Hooks/useEffect-compare-array-in-second-argument-replace-ComonentDidMount-with-useRef.md b/.../Hooks/useEffect-compare-array-in-second-argument-replace-ComonentDidMount-with-useRef.md
diff --git a/React/Hooks/useEffect-compare-array-in-second-argument-shallow.md b/React/Hooks/useEffect-compare-array-in-second-argument-shallow.md
diff --git a/React/Hooks/useEffect-replace-componentDidMount-and-Update.md b/React/Hooks/useEffect-replace-componentDidMount-and-Update.md
diff --git a/React/Hooks/useEffect-replace-componentWillUnmount.md b/React/Hooks/useEffect-replace-componentWillUnmount.md
diff --git a/React/Hooks/useEffect-running-callback-after-setState-IMPORTANT.md b/React/Hooks/useEffect-running-callback-after-setState-IMPORTANT.md
diff --git a/React/Hooks/useEffect-with-Redux-actions-GOOD.md b/React/Hooks/useEffect-with-Redux-actions-GOOD.md
diff --git a/React/Hooks/useReducer-basics-1.md b/React/Hooks/useReducer-basics-1.md
diff --git a/React/Hooks/useState-replace-componentWillReceiveProps-getDerivedStateFromProps.md b/React/Hooks/useState-replace-componentWillReceiveProps-getDerivedStateFromProps.md
diff --git a/React/Hooks/userReducer-vs-redux-reducer.md b/React/Hooks/userReducer-vs-redux-reducer.md
diff --git a/React/functional-component-declaration-syntax-1.md b/React/functional-component-declaration-syntax-1.md
diff --git a/React/preventDefault-in-React.md b/React/preventDefault-in-React.md
diff --git a/React/pureComponent-Performance-benefit.md b/React/pureComponent-Performance-benefit.md
diff --git a/React/pureComponent.md b/React/pureComponent.md
diff --git a/React/refs-in-react/execute-child-function-from-parent.md b/React/refs-in-react/execute-child-function-from-parent.md
diff --git a/React/refs-in-react/refs-Call-child-method-from-parent.md b/React/refs-in-react/refs-Call-child-method-from-parent.md
diff --git a/React/refs-in-react/useRef-basics.md b/React/refs-in-react/useRef-basics.md
diff --git a/React/server-side-rendering-react-app.md b/React/server-side-rendering-react-app.md
diff --git a/Redux/actions.payload.md b/Redux/actions.payload.md
diff --git a/Redux/mapStateToProps-how-exactly-it-gets-the-state-from-reducers.md b/Redux/mapStateToProps-how-exactly-it-gets-the-state-from-reducers.md
diff --git a/Typscript/JS-to-TS-Migration/js-to-ts-1.md b/Typscript/JS-to-TS-Migration/js-to-ts-1.md
diff --git a/Web-Development-In-General/critical-render-path.md b/Web-Development-In-General/critical-render-path.md
diff --git a/Web-Development-In-General/websocket-basics.md b/Web-Development-In-General/websocket-basics.md
diff --git a/report.20200209.024254.24169.001.json b/report.20200209.024254.24169.001.json