How to parse and extract CSS selectors as strings?


Tags: javascript,css,regex,css-selectors

Problem :

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']


Solution :

Here is the solution I ended up with:

  1. Replace the curly braces including its contents with some unique characters. Regex was picked up from here Matching CSS Selectors with a Javascript RegExp
  2. 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);

    CSS Howto..

    How to rotate text using CSS

    How can I make a DIV cursor and background color change if I hover over it?

    How well do you need to know HTML before delving into CSS?

    How to get the style value using attr

    How can you remove the table-tags in CreateUserWizard control

    How to select all fields from a single box?

    How to make a responsive mosaic css fullscreen width

    How to create and style dropdown menus using the wordpress menus section? [closed]

    How can I center a tooltip below an element that is narrower than the tooltip?

    How determine what CSS selector to use from my HTML source code?

    How To Embed font-awesome CSS into DOM Scripting (javascript)?

    How to force CSS to be displayed on empty element following whitespace

    CSS: How to create a
  • with 100% width
  • How to give border to any element using css without adding border-width to the whole width of element?

    how to design like this form in html

    How to add to css class in a single html tag? [duplicate]

    how to make the background the same as the div size in css

    How to determine if image is hyperlinked?

    How To Layout a Grid in CSS

    How to be able to preload jquery contents into hidden tabs for ie browser

    How can I make it so the first element in a DIV has a different CSS to others?

    how to show like chat box for the div/p tag top left/right corners

    Can't figure out how to set color for specific div's in the loop

    How to use media queries in an effective way? [closed]

    How to make CSS input range thumb not appear at first

    How to make div css background hover

    How can I separate a column on a web page depending on whether or not the browser is mobile?

    How to Center Rotated text with CSS

    How to vertically align html radio buttons with CSS-only in this code?

    How do I maintain modularity with mixins?