diff --git a/aio/content/guide/component-styles.md b/aio/content/guide/component-styles.md
index a81407b758..9d2c14eefb 100644
--- a/aio/content/guide/component-styles.md
+++ b/aio/content/guide/component-styles.md
@@ -83,6 +83,15 @@ The next example targets the host element again, but only when it also has the `
 
 <code-example path="component-styles/src/app/hero-details.component.css" region="hostfunction" header="src/app/hero-details.component.css"></code-example>
 
+The `:host` selector can also be combined with other selectors.
+Add selectors behind the `:host` to select child elements, for example using `:host h2` to target all `<h2>` elements inside a component's view.
+
+<div class="alert is-helpful">
+
+You should not add selectors (other than `:host-context`) in front of the `:host` selector to style a component based on the outer context of the component's view. Such selectors are not scoped to a component's view and will select the outer context, but it's not native behavior. Use `:host-context` selector for that purpose instead.
+
+</div>
+
 ### :host-context
 
 Sometimes it's useful to apply styles based on some condition *outside* of a component's view.