From 7390721038aabc61349ef4f0b3f642960bc47e13 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jesper=20R=C3=B8nn-Jensen?= Date: Sun, 23 Mar 2014 21:50:35 +0100 Subject: [PATCH] Reduced 10 level deep nesting of CSS rules. Instead, using the simpler depth-0,-1,-2,etc for adding padding to the result when nested. Greatly simplifies complexity of expressions and reduces (hopefully) rendering time. From https://developers.google.com/speed/docs/best-practices/rendering#UseEfficientCSSSelectors Descendant selectors are inefficient because, for each element that matches the key, the browser must also traverse up the DOM tree, evaluating every ancestor element until it finds a match or reaches the root element. --- select2.css | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/select2.css b/select2.css index 6f1ada36..5be5476c 100644 --- a/select2.css +++ b/select2.css @@ -326,14 +326,6 @@ Version: @@ver@@ Timestamp: @@timestamp@@ padding-left: 0; } -.select2-results ul.select2-result-sub > li .select2-result-label { padding-left: 20px } -.select2-results ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 40px } -.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 60px } -.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 80px } -.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 100px } -.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 110px } -.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 120px } - .select2-results li { list-style: none; display: list-item; @@ -358,6 +350,16 @@ Version: @@ver@@ Timestamp: @@timestamp@@ user-select: none; } +.select2-results-dept-0 .select2-result-label { padding-left: 20px } +.select2-results-dept-1 .select2-result-label { padding-left: 40px } +.select2-results-dept-2 .select2-result-label { padding-left: 60px } +.select2-results-dept-3 .select2-result-label { padding-left: 80px } +.select2-results-dept-4 .select2-result-label { padding-left: 100px } +.select2-results-dept-5 .select2-result-label { padding-left: 110px } +.select2-results-dept-6 .select2-result-label { padding-left: 120px } + + + .select2-results .select2-highlighted { background: #3875d7; color: #fff;