diff --git a/docs/.vuepress/public/sm-disable-selector.jpg b/docs/.vuepress/public/sm-disable-selector.jpg
new file mode 100644
index 000000000..baca23a25
Binary files /dev/null and b/docs/.vuepress/public/sm-disable-selector.jpg differ
diff --git a/docs/modules/Selectors.md b/docs/modules/Selectors.md
index 2640261dc..ae4c642bf 100644
--- a/docs/modules/Selectors.md
+++ b/docs/modules/Selectors.md
@@ -69,6 +69,15 @@ The label **Selected** indicates on which CSS query styles will be applied, so i
 }
 ```
 
+You can also disable specific selectors and change the state (eg. Hover) in order to switch the target of styling.
+
+<img :src="$withBase('/sm-disable-selector.jpg')" alt="Disabled selectors" style="display: block; margin: auto"/>
+
+
+
+
+## Component-first styling
+