CSS with Turbine: Parsing Multiple Nested Selectors
In this third part of the series, I develop another basic example that shows how simple it is to code multiple nested CSS selectors by using the powerful parsing capabilities provided by Turbine. The library will let you nest any number of elements just as easily, as long as you stick to the indentation rules it requires to function as expected.
CSS with Turbine: Parsing Multiple Nested Selectors (Page 1 of 2 )
Turbine is a powerful library written in PHP which will permit you to do all sorts of clever things with your CSS files. These include delivering them in a minified and compressed way, defining sets of styles using a shortened and tight syntax, utilizing CSS constants and even implementing basic object-oriented rules.
But this would be just talk if I didn't actually show you how functional Turbine can be when it comes to writing shorter and more compact CSS code in a few easy steps. In earlier parts of this series I developed a bunch of approachable examples that showed how to process a specified CSS files with the library, and how to create nested selectors without having to write long, time-consuming lines of code.
I left off at the last tutorial explaining how to use Turbine for defining the visual presentation of some sections on a web page, which made use of a couple of nested selectors. But as you may have guessed, the library is also capable of processing more complex hierarchies of nested CSS selectors in a simple fashion. In keeping with this, in this third episode of the series I’m going to illustrate how to accomplish this task, as usual, via some easy-to-follow examples.
Now, it’s time to leave the boring theory behind and explore a few more handy features that Turbine freely offers. Let’s go!
Review: working with nested CSS selectors
As I just mentioned in the introduction, Turbine will let you write CSS rules by means of a shorter syntax, very similar to the one used by Python. Naturally, this notation can be applied to defining nested selectors as well. This is demonstrated by the example below, which was developed in the preceding part of the series. Check it out:
body padding: 0 margin: 0 background: #000 font: 0.9em Arial, Helvetica, sans-serif color: #fff p margin: 0 0 10px 0 #wrapper width: 960px margin: 0 auto #header, #footer padding: 20px #content padding: 20px overflow: hidden .subsection float: left width: 240px padding: 20px margin-right: 20px background: #00f
Since Turbine bases most of its parsing logic on assigning a consistent indentation to one or multiple rules defined in a CSS file, the example above shows how to create a child selector (in this case a class named “subsection”) by indenting its set of styles. It’s that simple, really.
Needless to say, the previous file must be processed by the library to generate valid and well-formatted CSS code, which is exactly what the following web page does:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Parsing a CSS file with Turbine (using nested selectors)</title> <link rel="stylesheet" href="css.php?files=styles.cssp" /> </head> <body> <div id="wrapper"> <div id="header"> <h1>Parsing a CSS file with Turbine</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Sed quis elit erat, et ultricies diam. Phasellus non turpis malesuada erat ultrices tincidunt sed vitae magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis purus risus, lacinia at faucibus id, luctus nec diam. In nulla neque, consequat ac hendrerit ac, pulvinar eu dui. Aenean in arcu felis, non hendrerit est.</p> </div> <div id="content"> <h2>Main content section</h2> <div class="subsection"> <h3>First subsection</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> <div class="subsection"> <h3>Second subsection</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> <div class="subsection"> <h3>Third subsection</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> <div id="footer"> <h2>Footer section</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Sed quis elit erat, et ultricies diam. Phasellus non turpis malesuada erat ultrices tincidunt sed vitae magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis purus risus, lacinia at faucibus id, luctus nec diam. In nulla neque, consequat ac hendrerit ac, pulvinar eu dui. Aenean in arcu felis, non hendrerit est.</p> </div> </div> </body> </html>
I should assume that you’re already familiar with parsing a specified CSS file using Turbine, as the full details of this process were covered in earlier tutorials in this series. So take a look at the following code sample, which shows the output that the library produces after processing the previous CSS styles. Here it is:
As the above code sample shows, Turbine does a great job of coding a couple of nested selectors. It’s probable, however, that you’re wondering if this ability can be extended to multiple elements, other than the ones defined before. Well, in this case the answer is yes! To demonstrate this, in the upcoming section I’m going to set up another example, which will accomplish this in a few easy steps.
To learn more about how the example will be developed, click on the following link and keep reading.
Style Sheets 
CSS with Turbine: Working with Multi-Line Selectors
