Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to Generate All Possible CSS 2 Selector Combinations?
    primarykey
    data
    text
    <p>What would be the best way to generate all possible CSS 2 Selector Combinations for a DOM element in context with the current state of the <code>document</code>? </p> <p>Eg: For the following MarkUp</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="content"&gt; &lt;ul&gt; &lt;li&gt;a&lt;/li&gt; &lt;li&gt;b&lt;/li&gt; &lt;li class="last-li"&gt;c&lt;/li&gt; &lt;!--ARGUMENT ELEMENT--&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>A JS/jQuery Method such that the <code>&lt;!--ARGUMENT ELEMENT--&gt;</code> in the above markup is given as an argument to the method it returns all possible CSS 2 Selector combinations for the Argument in form of an array. An optional parameter can be added to the method which will define the maximum depth of CSS 2 Selector Nesting. If this parameter is set to false it should return all possible combinations (Will be a performance hogger if set to false)</p> <p>Example Output:</p> <pre><code>[ ".last-li", "li.last-li", "ul .last-li", "ul li.last-li", "div ul .last-li", "div ul li.last-li", "#content ul .last-li", "#content ul li.last-li", "div#content ul .last-li", "div#content ul li.last-li", "body div ul li.last-li", "body div ul .last-li", "body #content ul li.last-li", "body div#content ul .last-li", "body div#content ul li.last-li", ] </code></pre> <p>Any pointers in this regard will be extremely helpful.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload