How to parse and extract CSS selectors as strings?

Question

What is the simplest way to extract css selectors as strings?

Given this as input:

#article{width:690px;overflow:hidden}
#article h2:first-child a{text-decoration:none}
#works .project p:last-child{margin-top:20px;font-size:13px}
#works .project img, #works .info img{width:680px;min-height:400px;border:1px dotted #ccc;margin-bottom:40px}

How can I get a list of selectors such as this:

var selectors = ['#article','#article h2:first-child a','#works .project p:last-child','#works .project img']

possible duplicate of [CSS parser/abstracter? How to convert stylesheet into object](http://stackoverflow.com/questions/2226869/css-parser-abstracter-how-to-convert-stylesheet-into-object) — Diodeus - James MacFarlane, Nov 28 '11 at 21:19
possible duplicate of [Matching CSS Selectors with a Javascript RegExp](http://stackoverflow.com/questions/5481749/matching-css-selectors-with-a-javascript-regexp) — BoltClock, Nov 28 '11 at 21:20

score 2 · Answer 1 · answered Nov 28 '11 at 21:20

2

Define "input. If that's in a stylesheet that's been parsed by the browser, you can use the DOM Level 2 Style APIs to extract the CSS rules in your stylesheet and query them for selectors (though you may have to do comma-splitting yourself).

If it's not parsed by the browser but is provided as input via some other mechanism, you might be able to use JSCSSP (a CSS parser in JavaScript) to parse the input.

answered Nov 28 '11 at 21:20

Lily Ballard

182,031
33
381
347

Its a string of CSS that the user has provided. – kht Nov 28 '11 at 21:22
@kht: Then it sounds like JSCSSP is probably the solution you want. – Lily Ballard Nov 28 '11 at 22:20
Perhaps, doesn't it seem overkill though just to extract css selectors? – kht Nov 29 '11 at 06:56
@kht: Ehh, maybe. The answer for [Matching CSS Selectors with a Javascript RegExp](http://stackoverflow.com/questions/5481749/matching-css-selectors-with-a-javascript-regexp) might work for you, though I'm always a bit skeptical about people using regexps for parsing. There's probably edge cases that the regexp won't handle, but JSCSSP will (since it implements a proper parser). – Lily Ballard Nov 29 '11 at 07:11

score 1 · Accepted Answer · edited May 23 '17 at 12:29

Here is the solution I ended up with:

Replace the curly braces including its contents with some unique characters. Regex was picked up from here Matching CSS Selectors with a Javascript RegExp
Split the list at those unique characters.

Just wanted to post it here for documention:

var css = "#article[type=x]{width:690px;overflow:hidden}#article h2:first-child a{text-decoration:none}#works .project p:last-child{margin-top:20px;font-size:13px}#works .project img, #works .info img{width:680px;min-height:400px;border:1px dotted #ccc;margin-bottom:40px}"
var found = css.replace(/{([^}]*)}/gm,"~~~").split("~~~");

document.write(found);

score 0 · Answer 3 · answered Nov 28 '11 at 21:20

0

WARNING: Waporcode, I haven't tested this, but I've used something like this before....

    document.styleSheets[0].cssRules[0].selectorText

Is that what you're looking for?

answered Nov 28 '11 at 21:20

Daniel Magliola

30,898
61
164
243

1

IE does it differently. *sigh* see: http://www.quirksmode.org/bugreports/archives/2006/01/IE_wont_allow_documentcreateElementstyle.html – Diodeus - James MacFarlane Nov 28 '11 at 21:24
The CSS will be user input, so the CSS is basically a string that needs to be parsed. – kht Nov 28 '11 at 21:27

How to parse and extract CSS selectors as strings?

3 Answers3

Linked