fix(guide): simplify directory structure

guide/english/css/selectors/attribute/class-equals/index.md

@@ -0,0 +1,15 @@
+---
+title: Class Equals
+---
+## Class Equals
+
+This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/css/selectors/attribute/class-equals/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
+
+<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
+
+<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
+
+#### More Information:
+<!-- Please add any articles you think might be helpful to read before writing the article -->
+
+

guide/english/css/selectors/attribute/class/index.md

@@ -0,0 +1,31 @@
+---
+title: Class
+---
+## Class
+
+The CSS “class” selector is used to apply the same styling to multiple elements on the page. A great way to think of this would be like the blueprint of a car or building. The blueprint will allow you to build several cars or several buildings in the same manner after designing the actual layout once.
+
+### Use Cases
+
+Unlike the CSS “ID” class names are not unique. Therefore, it is fine for you to use a “class” several times if you would like for these elements to have the same styling applied. In fact, this would be a great time for you to use a “class.” If you would like for three “div” elements in your HTML to have a blue background you could use a class once in your CSS as seen in the example below.
+
+```
+<html>
+<style>
+  .blueBg {
+    background-color: blue;
+  }
+</style>
+  <body>
+    <div class="blueBg"></div>
+    <div class="blueBg"></div>
+    <div class="blueBg"></div>
+  </body>
+</html>
+```
+
+#### More Information:
+<!-- Please add any articles you think might be helpful to read before writing the article -->
+If you would like to learn more information on the CSS “class” selector please visit <a href="https://css-tricks.com/the-difference-between-id-and-class/">this page</a>
+
+

guide/english/css/selectors/attribute/dollar-sign-equals/index.md

@@ -0,0 +1,18 @@
+---
+title: Dollar Sign Equals
+---
+## Dollar Sign Equals
+
+Dollar sign CSS attribute selector or $ is used for selecting attributes that end with specific value.
+
+#### Example
+
+If you want to search all anchor links of file type .pdf and make them red, you can do it like this:
+
+```css
+a[href$=".pdf"] {
+   color: red;
+}
+```
+
+

guide/english/css/selectors/attribute/hat-equals/index.md

@@ -0,0 +1,15 @@
+---
+title: Hat Equals
+---
+## Hat Equals
+
+This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/css/selectors/attribute/hat-equals/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
+
+<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
+
+<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
+
+#### More Information:
+<!-- Please add any articles you think might be helpful to read before writing the article -->
+
+

guide/english/css/selectors/attribute/index.md

@@ -0,0 +1,15 @@
+---
+title: Attribute
+---
+## Attribute
+
+This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/css/selectors/attribute/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
+
+<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
+
+<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
+
+#### More Information:
+<!-- Please add any articles you think might be helpful to read before writing the article -->
+
+

guide/english/css/selectors/attribute/star/index.md

@@ -0,0 +1,17 @@
+---
+title: Star
+---
+## Star
+
+Star CSS attribute selector or * is used for selecting attributes that contain specific value.
+
+#### Example
+
+If you want to search all anchor links that contain "code" anywhere in the URL value and make them yellow, you can do it like this:
+
+```css
+a[href*="code"] {
+   color: yellow;
+}
+```
+

guide/english/css/selectors/general/ajacent-sibling/index.md

@@ -0,0 +1,15 @@
+---
+title: Ajacent Sibling
+---
+## Ajacent Sibling
+
+This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/css/selectors/general/ajacent-sibling/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
+
+<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
+
+<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
+
+#### More Information:
+<!-- Please add any articles you think might be helpful to read before writing the article -->
+
+

guide/english/css/selectors/general/child/index.md

@@ -0,0 +1,25 @@
+---
+title: Child
+---
+## Child
+
+The child selector is represented by `>` and is placed between two selectors: `parent > child`. It matches any second selector that are children of first selector (the parent). The second selector must be immediate children of the first one.
+
+Here's an example of the syntax:
+
+```css
+first selector (parent) > second selector (child) { 
+    css declarations; 
+}
+```
+
+Here's a code example that matches all immediate `span` element of with a `div` parent:
+
+```css
+div > span { 
+    background-color: red;
+}
+```
+
+### More Information:
+- <a href='https://www.w3.org/TR/CSS22/selector.html#child-selectors' target='_blank' rel='nofollow'>W3C Child Selector Working Draft</a>

guide/english/css/selectors/general/descendant/index.md

@@ -0,0 +1,15 @@
+---
+title: Descendant
+---
+## Descendant
+
+This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/css/selectors/general/descendant/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
+
+<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
+
+<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
+
+#### More Information:
+<!-- Please add any articles you think might be helpful to read before writing the article -->
+
+

guide/english/css/selectors/general/general-sibling/index.md

@@ -0,0 +1,15 @@
+---
+title: General Sibling
+---
+## General Sibling
+
+This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/css/selectors/general/general-sibling/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
+
+<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
+
+<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
+
+#### More Information:
+<!-- Please add any articles you think might be helpful to read before writing the article -->
+
+

guide/english/css/selectors/general/id/index.md

@@ -0,0 +1,15 @@
+---
+title: Id
+---
+## Id
+
+This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/css/selectors/general/id/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
+
+<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
+
+<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
+
+#### More Information:
+<!-- Please add any articles you think might be helpful to read before writing the article -->
+
+

guide/english/css/selectors/general/index.md

@@ -0,0 +1,15 @@
+---
+title: General
+---
+## General
+
+This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/css/selectors/general/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
+
+<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
+
+<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
+
+#### More Information:
+<!-- Please add any articles you think might be helpful to read before writing the article -->
+
+

guide/english/css/selectors/general/type/index.md

@@ -0,0 +1,32 @@
+---
+title: Type
+---
+## Type
+
+<p>Type Selector selects elements by node(tag) name.</p>
+
+####Code Syntax</h4>
+
+```css
+* { 
+    css declarations; 
+}
+```
+
+####Code Example</h4>
+```css
+h1 { 
+    background-color: red;
+}
+```
+selects all h1 element & set background color red.
+
+```css
+div { 
+    width: 100px;
+}
+```
+selects all div element & set element width 100px.
+
+#### More Information:
+- <a href='https://www.w3.org/TR/CSS22/selector.html#type-selectors' target='_blank' rel='nofollow'>W3C Working Draft</a>

guide/english/css/selectors/general/universal/index.md

@@ -0,0 +1,47 @@
+---
+title: Universal
+---
+
+## Universal
+
+Universal Selector(*) selects all elements . It also selects all elements inside an element. You can attach universal selector with any other selector.
+
+### Code Syntax
+
+```css
+* { 
+  css declarations; 
+}
+```
+
+```css
+element * {
+  css declarations; 
+}
+```
+
+#### Code Example
+
+This selector matches all elements and set font color as green.
+
+```css
+* { 
+  color: green;
+}
+```
+
+This selector selects all div elements and set font color as green.
+
+```css
+div * { 
+  color: green;
+}
+```
+
+This selector selects all elements whose language attribute value starts with en.
+
+```css
+* [lang^=en] {
+  color: green;
+}
+```

guide/english/css/selectors/index.md

@@ -0,0 +1,68 @@
+---
+title: Selectors
+---
+# Selectors
+
+Selectors are CSS rules to target HTML elements to apply styles. Tag names, class names, id, and attributes are some of the hooks used as selectors.
+
+## Selector Syntax
+
+Selectors arranged in a specific sequence would build up to a rule to target elements. An example, 
+
+```css
+/* selects anchor tags */
+a { 
+    color: orange;
+}
+
+/* selects elements with hero class */
+.hero {
+    text-align: center;
+}
+```
+
+## Type of Selectors
+
+Type | Description
+-------|------------
+Type selectors | Tag names are used to select elements such as `h1` or `a`.
+Universal Selector | Selector that applies to all elements. `div *` matches all elements within div elements.
+Attribute Selector | Selectors that target elements based on their attributes [and optionally, their values]. `h1[title]` selects `h1` elements with `title` attribute.
+Class Selector | Selector that targets elements using their class names.
+ID Selector | Selector that uses ID to target elements. `#logo` selects the element with `logo` as ID.
+Pseudo-class Selector | Special selectors that target elements based on their state. `a:hover` selector applies style when pointer hovers over links.
+
+## Selector Combinators
+
+Combinator | Purpose 
+-----------|------------
+`white space` | Descendant combinator. `.nav li` selects all `li` children within the class `.nav`, including nested `li` elements.
+`>` | Child combinator. `.menu > li` selects all li that are direct children of elements with `.menu` class.
+`+` | Adjacent sibling combinator. `.logo + h1` targets `h1` that is an immediate sibling to `.logo` class.
+`~` | General sibling combinator. `header ~ div` targets `div` elements that are siblings to `header` elements.
+
+This section details all of these electors.
+
+#### More Information:
+You can learn more about selectors on these resources:
+* [Official CSS3 Selectors specification](https://www.w3.org/TR/css3-selectors)
+* [Selectors page on Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors)
+* [CSS Selectors Cheat Sheet on FreeCodeCamp Guides](https://guide.freecodecamp.org/css/tutorials/css-selectors-cheat-sheet)
+
+
+Selectors in CSS (cascading style sheets) are determined based on *specificity*, with this we are able to be more specific on our style rules and override other rules that may be targeting the same element but is not as specific. The way this specificty hierarchy works is based on weight, meaning a element Selector has a weight of 1 (one), a class selector has a weight of 10 (ten) and a id selector has a weight of One Hundred (100). We are able to combine different selectors together be more specific on the element we whant to change. 
+
+As a example: 
+
+  ```css
+      p {
+        color: blue;
+      }
+      p .red {
+         color: red;
+      }
+   ```
+Our type selector p will select all p elements in our html document but it only has a weight of one. in contrast, the class selector has a weight of 11 for the reason we are combining a type selector with a class selector(this selector is matching all p elements with a class of red). 
+--* Directly targeted rules will always have precedence over rules which inherits elements from its ancestor. 
+--* Specifity is only applied when multiple declarations are targeting the same element, only then this rule is then applied.  
+--* specifity is usually why some of you style rules do not apply to elements when you would expect them to. 

guide/english/css/selectors/pseudo/active/index.md

@@ -0,0 +1,27 @@
+---
+title: Active
+---
+## Active
+
+The CSS :active selector changes the style of an HTML element when a user activates the element. This selector typically provides the user confirmation that they have clicked on an element. 
+The :active selector is most commonly used on ```<a>``` and ```<button>``` elements but can be used on all elements.
+
+If multiple CSS pseudo selectors are being used, the :active selector must come after the :hover selector.
+
+In the example below, when a user clicks on a link, the text color will change from black to red until the click action stops. 
+
+```css
+a {
+  color: black;
+}
+
+a:active {
+  color: red;
+}
+```
+
+#### More Information:
+* [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/:active)
+* [W3 Schools](https://www.w3schools.com/cssref/sel_active.asp)
+
+

guide/english/css/selectors/pseudo/after/index.md

@@ -0,0 +1,42 @@
+---
+title: After
+---
+## After
+
+The ```::after``` CSS pseudo-element inserts a custom HTML element after the content of the selected HTML element. This selector is most commonly used to add visual content using the CSS ```content``` property.
+
+General Syntax:
+
+```css
+::after
+```
+
+## Example
+
+```css
+/* "Text to insert" is placed after the content of each <div> element */
+div::after {
+  content: "Text to insert";
+}
+```
+
+## More Examples
+
+A great example of a practical use case is if you wanted to display the ```href``` attribute value for all links on your page.
+
+```html
+<a href="www.freecodecamp.org">Learn to code</a>
+```
+
+```css
+a::after {
+  content: " " attr(href);
+}
+```
+
+The ```::after``` CSS pseudo-element can be used in many creative ways, especially when combined with it's sibling ```::before```.
+
+#### More Information:
+* [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/::after)
+* [W3 Schools](https://www.w3schools.com/cssref/sel_after.asp)
+* [CSS Tricks - A Whole Bunch of Amazing Stuff Pseudo Elements Can Do](https://css-tricks.com/pseudo-element-roundup/)

guide/english/css/selectors/pseudo/focus/index.md

@@ -0,0 +1,60 @@
+---
+title: Focus
+---
+## Focus
+
+### Definition
+
+The `:focus` represents an element that has received a focus state, triggered by an event from the keyboard. Trigger action comes from pressing the **TAB** key, which visually create a ring around an element.
+
+### Syntax
+
+`:focus`
+
+### Example
+
+```
+a:focus {
+  color: red;  
+}
+```
+
+### Output
+[JSfiddle Link](https://jsfiddle.net/ejae7vb3/1/)
+
+
+#### More Information:
+[MDN - Mozilla Developers Network | :focus - CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus)
+
+The :focus CSS pseudo-class is used to select the element that has focus (such as a form input).
+
+It is generally triggered when the user clicks or taps on an element or selects it with the keyboard's "tab" key.
+
+Syntax:
+
+```css
+:focus
+```
+
+## Example
+
+HTML:
+
+```html
+<form>
+  <input type="text" value="The background will turn yellow when you click on it.">
+</form>
+```
+
+CSS:
+
+```css
+input:focus {
+   background-color: yellow;
+}
+```
+
+#### More Information:
+For more information visit [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus)
+
+[W3.org | CSS Documentation](https://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes)

guide/english/css/selectors/pseudo/hover/index.md

@@ -0,0 +1,90 @@
+---
+title: Hover
+---
+## Hover
+  The `selector:hover` pseudo-class is triggered when you interact with the element (selector) with a pointing device generally a mouse pointer. The styles of the element hovered over will be overridden by style defined in `selector:hover` pseudo-class.<br>
+To style links/elements properly the rules should be defined in the order :- <br>
+:link - :visited - :hover - :active
+
+**Syntax :**
+```css
+ selector:hover {
+    css declarations;
+ }
+```
+
+## More Examples
+Below are some more complex examples of what you can do with the `:hover` pseudo-class. Keep in mind that the `.second` div **must** come after the `.first ` div in all of these examples.
+
+ 1. When you hover over an element change an adjacent sibling.
+
+```html
+<style>
+  .first:hover + .second {
+    background-color: blue;
+  }
+</style>
+
+<div class="first">First</div>
+<div class="second">Second</div>
+```
+
+The code above will change the background color of `.second` to blue when you hover over `.first`.
+
+ 2. When you hover over an element change a general sibling.
+
+```html
+<style>
+  .first:hover ~ .second {
+    background-color: blue;
+  }
+</style>
+
+<div class="first">First</div>
+<div class="middle">Middle</div>
+<div class="second">Second</div>
+```
+
+This example gives a little bit more flexibility as the two elements no longer have to be directly adjacent.
+
+ 3. When you hover over an element change a direct descendant.
+
+```html
+<style>
+  .first:hover > .second {
+    background-color: blue;
+  }
+</style>
+
+<div class="first">
+  First
+  <div class="second">Second</div>
+</div>
+```
+
+The code above will change the background color of `.second` to blue when you hover over `.first`.
+
+ 4. When you hover over an element change a general descendant.
+
+```html
+<style>
+  .first:hover .second {
+    background-color: blue;
+  }
+</style>
+
+<div class="first">
+  First
+  <div class="container">
+    Container
+    <div class="second">Second</div>
+  </div>
+</div>
+```
+
+ As in example 2, this also gives more flexibility as the two elements no longer have to be directly adjacent. You will notice that the hover-able area is bigger in examples 3 and 4. This happens because you are still hovering over `.first` as long as the cursor is over one of its children.
+
+
+#### More Information:
+<a href='https://developer.mozilla.org/en-US/docs/Web/CSS/%3Ahover' target='_blank'>MDN Web Docs</a><br>
+<a href='https://www.w3schools.com/cssref/sel_hover.asp' target='_blank'>w3schools</a>

guide/english/css/selectors/pseudo/index.md

@@ -0,0 +1,54 @@
+---
+title: Pseudo
+---
+# Pseudo Selectors
+
+Pseudo selectors provide a way to target elements using pseudo classes or pseudo elements.
+
+## Structural Pseudo Classes
+Structural Pseudo classes offer a way to target elements based on their position.
+
+Class     | Description
+---------|------------
+`:root`                                        | Root of the document. In the context of HTML documents, this would be `html` tag at the top. It could mean different elements in other documents such as XML or SVG.
+`:only-child` | An element that is the only child of its parent element.
+`:first-child` | First child of a parent.
+`:last-child` | Last child of a parent element.
+`:nth-child(n)` | n-th child of its parent.
+`:nth-last-child(n)` | n-th child from the last child. The reverse of `:nth-child`.
+`:only-of-type` | The only element of the type within its siblings with other types.
+`:first-of-type` | The first element of the type among its siblings.
+`:last-of-type` | The last element of the type among its siblings.
+`:nth-of-type(n)` | n-th sibling of the same type. 
+`:nth-last-of-type(n)` | n-th sibling of the same type from the last one. The reverse of `:nth-of-type`.
+`:empty` | An element without any child elements.
+
+## UI State Pseudo Classes
+UI state pseudo classes offer a way to target elements based on their current state.
+
+Class     | Description
+---------|------------
+`:link` | Unvisited link elements.
+`:visited` | A link visited already.
+`:hover` | An element over which mouse pointer is hovering.
+`:active` | An element on which mouse pointer has been clicked, but not yet released.
+`:focus` | An element that has focus. Important for accessibility, for example, while using `tab` key for navigation.
+`:enabled` | An element that is in enabled state.
+`:disabled` | An element that has been disabled.
+`:checked` | A selected Checkbox or Radio button.
+
+## Pseudo elements
+Pseudo elements on the other hand, are dynamically generated elements or elements at a special place. 
+
+Selector     | Description
+---------|------------
+`::first-line` | First line of an element, usually a container or paragraph.
+`::first-letter` | A letter of an element. Widely used for styling drop-caps.
+`::before` | A dynamic element created with content of its own before the actual element.
+`::after` | A dynamic element created with content of its own after the actual element.
+
+## More Information:
+Additional information can be found on below references.
+
+* [Official CSS3 Selector specification](https://www.w3.org/TR/css3-selectors/#structural-pseudos)
+* [Mozilla developer network page on selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors)

guide/english/css/selectors/pseudo/link/index.md

@@ -0,0 +1,26 @@
+---
+title: Link
+---
+## Link
+
+The `:link` CSS pseudo-class is used to target all unvisited elements (e.g. anchor `<a>` elements) that have an `href` attribute, even if the `href` has an empty value.
+
+General Syntax:
+
+```css
+target:link
+```
+
+## Example
+
+```css
+/* Selects any <a> that has not been visited yet */
+a:link { 
+    color: red;
+}
+```
+
+
+#### More Information:
+
+- [:link (MDN)](https://developer.mozilla.org/en-US/docs/Web/CSS/:link)

guide/english/css/selectors/pseudo/visited/index.md

@@ -0,0 +1,35 @@
+---
+title: Visited
+---
+## Visited
+
+The CSS :visited selector changes the style of a link that has been visited by a user. This selector is used to help users distinguish between links they have and have not visited.
+
+If multiple CSS pseudo selectors are being used, the :visited selector must come after the :link selector.
+
+In the example below, after a user clicks on a link, the text color will change from black to green. 
+
+```css
+ a {
+   color: black;
+ }
+ 
+ a:visited {
+   color: green;
+ }
+```
+
+Due to user privacy reasons, the :visited selector is limited to modifying the styles of the following CSS properties:
+
+* color
+* background-color
+* border-color (including border-color for separate sides)
+* column-rule-color
+* outline-color
+* fill and stroke (for SVG images)
+
+#### More Information:
+* [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/:visited)
+* [W3 Schools](https://www.w3schools.com/cssref/sel_visited.asp)
+* [CSS Tricks Guide to Pseudo Classes & Elements](https://www.smashingmagazine.com/2016/05/an-ultimate-guide-to-css-pseudo-classes-and-pseudo-elements/#visited)
+