Add global selector example

Author: markdalgleish

src/components/App.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 
 import ScopedSelectors from './ScopedSelectors/ScopedSelectors';
+import GlobalSelectors from './GlobalSelectors/GlobalSelectors';
 import ClassInheritance from './ClassInheritance/ClassInheritance';
 import InheritanceOverrides from './InheritanceOverrides/InheritanceOverrides';
 import ScopedAnimations from './ScopedAnimations/ScopedAnimations';
@@ -34,6 +35,11 @@ export default class App extends Component {
         <p>The animation's keyframes are private to the animations module, only exposed publicly via a class which this component inherits from.</p>
         <ScopedAnimations />
 
+        <h2>Global Selectors</h2>
+        <p>Although they should be used as sparingly as possible, <strong>global selectors are still available when required.</strong></p>
+        <p>The following component styles all <strong>&lt;p&gt;</strong> tags nested inside it.</p>
+        <GlobalSelectors />
+
       </div>
     );
   }

src/components/GlobalSelectors/GlobalSelectors.css

@@ -0,0 +1,15 @@
+.root {
+  border-width: 2px;
+  border-style: solid;
+  border-color: brown;
+  padding: 0 20px;
+  margin: 0 6px;
+  max-width: 400px;
+}
+
+.root :global p {
+  color: brown;
+  font-size: 24px;
+  font-family: helvetica, arial, sans-serif;
+  font-weight: 600;
+}

src/components/GlobalSelectors/GlobalSelectors.js

@@ -0,0 +1,15 @@
+import styles from './GlobalSelectors.css';
+
+import React, { Component } from 'react';
+
+export default class GlobalSelectors extends Component {
+
+  render() {
+    return (
+      <div className={styles.root}>
+        <p>Global Selectors</p>
+      </div>
+    );
+  }
+
+};