Home arrow Style Sheets arrow CSS with Turbine: Parsing Multiple Nested Selectors
STYLE SHEETS

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.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 3
September 20, 2010
TABLE OF CONTENTS:
  1. · CSS with Turbine: Parsing Multiple Nested Selectors
  2. · Parsing multiple nested selectors

print this article
SEARCH DEVARTICLES

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:

/*
 Stylesheet generated by Turbine - http://turbine.peterkroener.de/
 Version: 1.1.0pre
 Path: /turbine
 Benchmark: 0.21976089477539
 Browser: firefox
 Browser version: 3.68
 Browser engine: gecko
 Browser engine version: 1.928
 Platform: windows
 Platform version: 5.1
 Platform type: desktop
*/
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;
}
#content .subsection {
 float: left;
 width: 240px;
 padding: 20px;
 margin-right: 20px;
 background: #00f;
}

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.


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials