How to Read Cascading Style Sheets

Published: 2014-11-04
Updated: 2014-12-02
Web: https://fritzthecat-blog.blogspot.com/2014/11/how-to-read-cascading-style-sheets.html

I call them "matcher languages". I mean things like awk, perl, XSLT and CSS.
Maybe "selector languages" would be the correct term.

You might want to skip my historical reflections and jump to "How to read CSS" by clicking here.

Those languages are made to process data, for example text lines. They let define a pattern the line must match, and let associate an action to be executed when such a line was found, e.g.:

selector: "begin" (before reading input starts)

action: set all counters to zero

selector: a line that contains H1

action: increment H1 counter

selector: any line

action: increment line counter

selector: end (after reading input ended)

action: output all counters

UNIX was always a text-based operating system, meaning the whole system-configuration resides in text files. As a consequence it has a lot of tools for text file processing. One of them is awk. Its concept is to have regular expressions ("matchers") on the top/left side, and associated code closures on the bottom/right.

Here is an awk script that implements exactly the specification above, try it by

awk -f script.awk < inputlines.txt

on any UNIX system (LINUX is one, maybe it's gawk here):

BEGIN {
  h1 = 0;
  lines = 0;
}
/H1/ {
  h1++;
}
{
  lines++;
}
END {
  printf("lines: %d, H1: %d\n", lines, h1);
}

I wrote many (and big) awk scripts in the Nineties. It's a really useful tool for automating your work. The name awk is built from the initials of its three authors, of which the "K" belongs to Brian Kernighan, one of the C language inventors.

Perl is just a blown-up awk. It spells "Practical Extraction and Reporting Language" - uh, this is ways too long :-)

XSLT emerged from the XML world, but the concept is the same:

<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

  <xsl:template match="/">
    <!-- action to take -->
  </xsl:template>

  <xsl:template match="H1">
    <!-- action to take -->
  </xsl:template>

  <xsl:template match="node()">
    <!-- action to take -->
  </xsl:template>

</xsl:stylesheet>

The selector is the match attribute of the element that encloses the action to take when a match is found in the XML input. That attribute contains an XPath expression.

XSLT originally was intended to take the role of CSS (having an XSLT processor in every browser, the server sending XML content and XSL style-sheets), but somehow that idea was not accepted by browser vendors. So CSS survived, though conceptually much weaker than XSLT / XPath. Did you notice that jQuery chose CSS as its DOM addressing mechanism, not XPath?

Here is the CSS way to define selectors and actions:

* {
  padding: 0;
  margin: 0;
}

body {
  background-color: #d0e4fe;
}

h1 {
  text-align: center;
}

CSS provides neither variables nor constants, it not even can calculate arithmetic expressions.

How to read CSS

Selectors

CSS selectors are on top/left of the { curly-brace-enclosed declarations block }. Selector and declarations block together is called CSS rule-set. The declarations are a list of properties with values, separated by ";" (semicolon). These are the styles to assign to all elements selected by the selector.

Selectors are built from three types of identifiers:

element tag names, for example h1 or p or div
element ids, for example #myid
CSS classes, for example .myclass or .myclass.yourclass

<head>
  <style>
    h1 {
      background-color: orange;
    }
    #blueid {
      color: blue;
    }
    .center {
      text-align: center;
    }
  </style>
</head>

<body>
  <h1>I am orange</h1>
  <p id="blueid">I am blue</p>
  <div class="center">I am centered</div>
</body>

There are some more selector terms, namely

attributes: [id] addresses all elements with an attribute "id"
pseudo-classes: a:hover addresses the hyperlink the mouse is currently over
pseudo-elements: p::before addresses the space to the left of any p element

See some CSS selector reference on the internet for more information.

Simple Expression

p {
    color: blue;
}

Any p element (paragraph) in the entire HTML document should have text in blue color.

OR Expression

Done using a comma:

.blue, p {
    color: blue;
}

Any element with class="blue" or any p element in the HTML document should have text in blue color.

AND Expression (classes only)

It makes no sense to select "p AND div", because any element can be only one of these, so none would match that condition. The same applies for ids, there can be only one id attribute/value in an element.
So "AND" makes sense only in relation with CSS-classes. A CSS class is one of the (possibly several, space-separated) values in the attribute of name "class".

<div class="blue center">I will be orange</div>

.blue.center {
  background-color: orange;
}

Any element with both blue and center classes should have an orange background.

div.blue.center {
  background-color: orange;
}

Any div element with both blue and center classes should have an orange background.

Mind that, in the CSS selector, there must be no space between the classes! With space between it would be a path expression.

Path Expression

Path parts are separated by "Combinators", of which there are four:

space denotes that the right part is a descendant of the left part, at any depth; mind that the other combinators can be surrounded by (then meaningless) spaces!
> denotes that the right part is a direct child of the left part
+ denotes that the right part is an adjacent sibling directly after the left part
~ denotes that the right part is any sibling of the left part anywhere in the child-list after the left part

div ul {
  list-style-type: none;
}

Any ul somewhere below (inside) a div should show no bullet icons.

"Somewhere" means a child at any depth.

Mind that a path-selector always addresses the last (rightmost) element in the path, not the first (leftmost), so a selector like the above styles the ul element, not the div element!
So you best read path expressions from right to left: "div ul" means the ul below the div.

#blueid > .center {
  color: green;
}

Any element with class center directly below (inside) an element with id="blueid" should have green text.

div + p {
  border: 1px solid black;
}

The p sibling directly after a div should have a border.

ul ~ p {
  text-align: center;
}

Any p sibling after an ul should have centered text.

Mind that CSS does not provide a negation, except in pseudo-classes.

Compound Examples

Here are examples which combine selector techniques.

section p.blue.center, article p.blue.center {
    background-color: orange;
}

Any p with both class blue and center somewehere below (inside) a section, or somewehere below (inside) an article, should have an orange background.

.redbordered * {
    border: 1px solid red;
}

Any element somewehere below (inside) an element with class redbordered should have a red border.

.my div,
.my p,
.my span,
#my div,
#my p,
#my span
{
  opacity: 0.5;
  background-color: azure;
}

Any div, p or span somewehere below (inside) an element with class="my" or with id="my" should have given background color and be half transparent.

So, how to read CSS selectors?

Split the selector by its commas, each comma-clause is one OR-alternative
Split by space, each word is a path part, maybe with symbols like >, +, ~ in between
Split by dot, classes are addressed using a leading dot and can be concatenated, meaning AND

Beside rule sets (selector + declarations block) CSS also defines so-called at-rules:


@charset "ISO-8859-1";

@import "something.css";

@media screen {
}

An at-rule can occur only top-level, not within a { block }.

Of course that's not all about CSS. You can find more information on w3schools and on lots of other good websites like this or this or this ....

ɔ⃝ Fritz Ritzberger, 2014-11-04