02 selectors

View the source code.

A CSS rule has a selector and a declaration block.

Selector    Declaration Block
p.center    {text-align: center; color: red;}

This rule selects all p elements with class~="center". All p elements with class~="center" will be center-aligned and red.

p.center {text-align: center; color: red;}

Example:

<p class="center fuzzy">Hello</p>

Note: class~="center" means the class attribute includes center.

---

This rule selects all elements with class~="music" that have an ancester with class~="rock".

.rock .music {background-color: yellow;}

Example:

<div class="rock light">
  <p class="cool music">Marimbas and bells</p>
</div>

---

This rule selects all elements with class~="rock" or class ~= "music".

.rock, .music {background-color: red;}

Examples:

<p class="rock light">Hey there</p>
<p class="loud music">Over here</p>

---

This rule selects all elements with class~="rock" and class~="music".

.rock.music {background: green}

Examples:

<p class="rock light">Hey there</p>
<p class="loud music">Over here</p>

---

This rule selects all h1 elements with class~="headline" that have an ancestor with class~=".page-header" that has an ancestor with class~="node" and class="getting-started".

.node.getting-started .page-header h1.headline {line-height: 1;}

Example:

<div class="node getting-started">
  <div class="page-header funny">
    <h1 class="headline">Hello</p>

Example (from the Python MongoDB page): This div includes everything from the the edge of the site header to the edge of the social footer.

<div class="site-wrapper node getting-started" ng-app="cloudApp" ng-controller="gettingStartedController">
  <div class="maia-stage page-header primary scroll-section" data-section-label="Python Starter Project">
    <div class="maia-aux page-header-inner">
      <div class="page-header-inner-inner">
        <div class="maia-cols">
          <div class="maia-col-8">
            ...
            <h1 class="headline"><span>Creating a Bookshelf App</span></h1>
          ...
</div>

<div id="social-footer">...</div>
...

Most of the rules in Silver Languages CSS files are in this form:

.node.getting-started xxx

For example, here's a rule from /python/index.css:

.node.getting-started .prereq-box .step-header .check-box { margin-right: 13px; cursor: pointer; float: left; }

Those rules restric their influence to children of this element:

<div class="site-wrapper node getting-started" ng-app="cloudApp" ng-controller="gettingStartedController">

Note: For python/index.css, we should probably change node to python:

.python.getting-started .prereq-box .step-header .check-box { margin-right: 13px; cursor: pointer; float: left; }

<div class="site-wrapper python getting-started" ng-app="cloudApp" ng-controller="gettingStartedController">