CSS with Turbine: Working with Multi-Line Selectors
In this fourth part of the series, you will learn how to take advantage of the functionality offered by “multi-line” CSS selectors with Turbine. This feature basically allows you to easily assign the same group of styles to multiple elements via an intuitive syntax.
CSS with Turbine: Working with Multi-Line Selectors (Page 1 of 2 )
While many web designers may find CSS parsing libraries (and perhaps even CSS frameworks) pretty pointless, some of the packages available nowadays can be really useful for defining styles in a short and compact way. Most offer additional capabilities, such as minifying and compressing CSS files.
Among those libraries, there’s one that has caught the attention of many people. It offers a fairly easy learning curve, an intuitive API, and an impressive number of features. Obviously I'm referring to Turbine, a solid PHP package that not only will permit you to define the CSS styles of your web pages using a Python-like syntax, but will let you use constants, shortcuts and a decent variety of plug-ins that will help you to deliver your CSS files in a faster and more cohesive manner.
Naturally, if you’ve been a loyal reader of this article series, at this stage you’re familiar with some of the features included with Turbine. In previous installments I explained how to parse style sheet files using the library, and how to perform more complex tasks, such as working with nested CSS selectors.
However, this exploration of Turbine isn’t over. The library comes bundled with many other features that are worth a close look. In this fourth episode of the series I’m going to show how to assign the same set of styles to multiple selectors in one go, a process known in Turbine’s parlance as “multi-line” selectors.
Ready to continue learning how to use Turbine? Then keep reading!
Review: using multiple nested selectors with Turbine
Just in case you haven't read the previous tutorial, I've included the source code for the technique we covered below. In that article, I created an example that showed how to code multiple nested selectors using the tight syntax allowed by Turbine.
Here's the web page that calls Turbine to parse the CSS file containing the nested selectors:
<!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 multiple 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 (using multiple nested selectors)</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’m not going to waste your time explaining again how to process a specified CSS file with Turbine, as the topic was discussed in detail in previous parts of this series. Instead, I suggest you look at the definition of the “styles.cssp” file requested by the above web page, which defines a set of three different nested selectors:
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: #f00 p color: #000
This is, unquestionably, the most interesting facet of this example. It shows how easy it is to create a hierarchy of nested elements by using Turbine’s notation. In this case, a “p” selector has been nested inside a “subsection” class, which is also a child of an element identified as “content.” That’s pretty easy to follow, right?
So far, so good. After the library parses the earlier CSS file, the shortened hierarchy is expanded back to its “valid” state, as shown in the following code fragment:
There you have it. As you can see, Turbine actually yields quite impressive results when defining several hierarchies of nested CSS selectors. However, the library is capable of performing many other useful parsing tasks, aside from the one that you just saw. In the next segment I’m going to create another example which will demonstrate how to instruct Turbine to assign the same group of styles to multiple selectors simultaneously.
As I mentioned at the beginning, this approach is called, in Turbine’s jargon, “multi-line” selectors. If you want to learn how to use them, click on the following link and keep reading.
Style Sheets 
