From 935ef13096fed6aa1ac4801337c22161f8b81309 Mon Sep 17 00:00:00 2001
From: Pete Bacon Darwin <pete@bacondarwin.com>
Date: Fri, 21 Sep 2018 14:07:51 +0100
Subject: [PATCH] build(docs-infra): improve directive selector rendering
 (#25768)

`:not(...)` blocks are now rendered as italic, while the
rest of the selector is bold.

PR Close #25768
---
 aio/src/styles/2-modules/_api-pages.scss              | 11 ++++++++++-
 .../transforms/templates/api/includes/selectors.html  |  2 +-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/aio/src/styles/2-modules/_api-pages.scss b/aio/src/styles/2-modules/_api-pages.scss
index 1cef682da2..e4d649f00e 100644
--- a/aio/src/styles/2-modules/_api-pages.scss
+++ b/aio/src/styles/2-modules/_api-pages.scss
@@ -116,7 +116,16 @@
     }
   }
 
-  .property-name {
+  .selector-list {
+    li, a {
+      font-weight: bold;
+      i {
+        font-weight: normal;
+      }
+    }
+  }
+
+  .member-name {
     font-weight: bold;
   }
 }
diff --git a/aio/tools/transforms/templates/api/includes/selectors.html b/aio/tools/transforms/templates/api/includes/selectors.html
index f0787340dd..63c92ece55 100644
--- a/aio/tools/transforms/templates/api/includes/selectors.html
+++ b/aio/tools/transforms/templates/api/includes/selectors.html
@@ -6,7 +6,7 @@
   {% else %}
   <ul>
     {%- for selector in doc.selectorArray %}
-    <li><code>{$ selector $}</code></li>
+    <li><code>{$ selector | replace(r/(:not\([^()]+\))/g, '<i>$1</i>') $}</code></li>
     {% endfor %}
   </ul>
   {% endif %}