Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Modular CSS with Sass Sass Grid System Building the Grid Container

Brendan Whiting
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Brendan Whiting
Front End Web Development Techdegree Graduate 84,738 Points
Posted by Brendan Whiting
.a{fill-rule:evenodd;}techdegree seal-36
Brendan Whiting
Front End Web Development Techdegree Graduate 84,738 Points

The CSS cascade seems counterintuitive here.

On line 38 of the HTML we're asked to put 'centered' before 'grid_col--8'. If I put the order the other way around ("grid_col--8 centered") it doesn't work and it's not centered, it floats right. But that seems to work opposite to how I thought the CSS cascade worked. What's going on here?

<!DOCTYPE html>
<html>
  <head>
    <title>Poly UI Kit</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/application.css">
  </head>
  <body>
    <div class="grid">
      <header class="grid__col--12 panel--padded--centered" role="banner"> 
        <a class="site-logo" href="/">
          <b class="srt">Poly - UI Toolkit</b>
        </a>
        <nav class="navbar" role="navigation">
          <span class="icn-toggle">
            <b class="srt">Toggle</b>
          </span>
          <ul class="nav">
            <li class="nav__item"><a href="#">Typography</a></li>
            <li class="nav__item"><a href="#">Buttons</a></li>
            <li class="nav__item"><a href="#">Forms</a></li>
            <li class="nav__item"><a href="#">Images</a></li>
            <li class="nav__item"><a href="#">Grid</a></li>
            <li class="nav__item--current"><a href="#">Navigation</a></li>
          </ul>
        </nav>     
      </header> 
    </div>

    <div class="grid">
      <div class="grid__col--12">
        <img class="img--hero" src="img/hero.jpg" alt="Poly - A simple UI Kit">
      </div>
    </div>

    <h4 class="grid">Typography</h4>

    <div class="grid">
      <div class="centered grid__col--8">
        <h1 class="headline-primary--grouped">Take a look at this amazing headline</h1>
        <h2 class="headline-secondary--grouped">Don't forget about the subtitle</h2>
        <p>This is a typical paragraph for the UI Kit. <a href="#">Here is what a link might look like</a>. The typical font family for this kit is Helvetica Neue.  This kit is intended for clean and refreshing web layouts. No jazz hands here, just the essentials to make dreams come true, with minimal clean web design. The kit comes fully equipped with everything from full responsive media styling to buttons to form fields. <em>I enjoy using italics as well from time to time</em>. Fell free to create the most amazing designs ever with this kit. I truly hope you enjoy not only the kit but this amazing paragraph as well. :)</p>
        <blockquote>You know what really gets me going? A really nice set of block quotes.  That's right, block quotes that say, "Hey, I'm an article you want to read and nurture."</blockquote>
      </div>
    </div>

    <h4 class="grid">Buttons</h4>

    <div class="grid">
      <div class="grid__col--12">
        <a class="btn--default" href="#">Button Default</a>
        <a class="btn--success" href="#">Button Success</a>
        <a class="btn--error" href="#">Button Error</a>
        <button class="btn--warning">Button Warning</button>
        <button class="btn--info">Button Info</button>
      </div>
    </div>

    <h4 class="grid">Form Elements</h4>

    <div class="grid">
      <div class="grid__col--12"> 
        <form class="form">
          <label class="form__label--hidden" for="name">Name:</label> 
          <input class="form__input" type="text" id="name" placeholder="Name">

          <label class="form__label--hidden" for="email">Email:</label>
          <input class="form__input" type="email" id="email" placeholder="email@website.com">

          <label class="form__label--hidden" for="msg">Message:</label>
          <textarea class="form__input" id="msg" placeholder="Message..." rows="6"></textarea>

          <input class="btn--default" type="submit" value="Submit">
          <input class="btn--warning" type="reset" value="Reset">
        </form>
      </div>
    </div>

    <h4 class="grid">Media</h4>

    <div class="grid">
      <div class="grid__col--5">
        <img src="img/sample.jpg" alt="sample image">
      </div>
      <div class="grid__col--5">
        <img class="img--wrap" src="img/sample.jpg" alt="sample image">
      </div>
      <div class="grid__col--2">
        <img class="img--avatar" src="img/avatar.png" alt="Avatar">
      </div>
    </div>

    <h4 class="grid">Footer</h4>

    <div class="grid">
      <footer class="grid__col--12 panel--padded--centered" role="contentinfo">
        <a class="site-logo" href="#">
          <b class="srt">Poly - UI Toolkit</b>
        </a>
        <p>A simple UI Kit for everyone to share and enjoy.</p>
      </footer>
    </div>
  </body>
</html>

@import url("http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900");
.grid:after {
  content: "";
  display: table;
  clear: both; }

.srt, .form__label--hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }

.panel--centered, .panel--padded--centered, [class^="btn--"] {
  text-align: center; }

.icn--nav-toggle:before {
  display: block;
  content: '';
  position: absolute; }

.centered, .grid {
  float: none;
  margin-left: auto;
  margin-right: auto; }

html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%; }

body {
  margin: 0; }

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block; }

audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline; }

audio:not([controls]) {
  display: none;
  height: 0; }

[hidden],
template {
  display: none; }

a {
  background: transparent; }

a:active,
a:hover {
  outline: 0; }

abbr[title] {
  border-bottom: 1px dotted; }

b,
strong {
  font-weight: bold; }

dfn {
  font-style: italic; }

h1 {
  font-size: 2em;
  margin: 0.67em 0; }

mark {
  background: #ff0;
  color: #000; }

small {
  font-size: 80%; }

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

img {
  border: 0; }

svg:not(:root) {
  overflow: hidden; }

figure {
  margin: 1em 40px; }

hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0; }

pre {
  overflow: auto; }

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em; }

button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0; }

button {
  overflow: visible; }

button,
select {
  text-transform: none; }

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer; }

button[disabled],
html input[disabled] {
  cursor: default; }

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0; }

input {
  line-height: normal; }

*
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0; }

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto; }

input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box; }

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em; }

legend {
  border: 0;
  padding: 0; }

textarea {
  overflow: auto; }

optgroup {
  font-weight: bold; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

td,
th {
  padding: 0; }

* {
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

body {
  color: #797e83;
  font-size: 16px;
  font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1.5; }

h3 {
  font-size: 1.125em; }

h4 {
  margin-top: 1.57143em;
  margin-bottom: 2.28571em;
  color: #d6d7d9;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 400;
  font-size: 0.875em; }

a {
  color: #656a6e;
  text-decoration: none;
  font-weight: 400; }

p {
  margin: 0 0 1.66667em;
  font-weight: 300;
  font-size: 1.125em;
  line-height: 1.5; }

blockquote {
  font-weight: 300;
  font-style: italic;
  font-size: 1.25em; }
  @media (min-width: 769px) {
    blockquote {
      margin: 1.33333em 0;
      padding: 0 0 0 5%;
      border-left: 0.33333em solid #ebecec;
      font-size: 1.5em; } }

ul,
li {
  margin: 0;
  padding: 0;
  list-style-type: none; }

img {
  margin-bottom: 1.5em;
  max-width: 100%;
  height: auto; }

input,
textarea {
  display: block;
  padding: 15px;
  width: 100%;
  outline: 0;
  border: 0; }

input:focus,
textarea:focus {
  transition: 0.3s; }

button {
  outline: 0; }

footer {
  border-top: 1px solid #ebecec; }
  footer p {
    font-size: 1em;
    margin-top: 1.375em; }

.panel, .panel--centered {
  padding-top: 1.875em;
  padding-bottom: 1.25em; }

.panel--padded, .panel--padded--centered {
  padding-top: 5em;
  padding-bottom: 2.125em; }

.grid {
  width: 90%; }
  [class*="grid__col--"] > .grid {
    width: 100%; }
  @media (min-width: 1100px) {
    .grid {
      max-width: 1050px; } }

@media (min-width: 769px) {
  .grid__col--1 {
    width: 6.5%; }

  .grid__col--2 {
    width: 15%; }

  .grid__col--3 {
    width: 23.5%; }

  .grid__col--4 {
    width: 32%; }

  .grid__col--5 {
    width: 40.5%; }

  .grid__col--6 {
    width: 49%; }

  .grid__col--7 {
    width: 57.5%; }

  .grid__col--8 {
    width: 66%; }

  .grid__col--9 {
    width: 74.5%; }

  .grid__col--10 {
    width: 83%; }

  .grid__col--11 {
    width: 91.5%; }

  .grid__col--12 {
    width: 100%; } }
@media (min-width: 1px) and (max-width: 768px) {
  [class^="grid__col--"] {
    margin-top: 0.75em;
    margin-bottom: 0.75em; } }
@media (min-width: 769px) {
  [class^="grid__col--"] {
    float: left;
    min-height: 1px;
    padding-left: 10px;
    padding-right: 10px; }
    [class^="grid__col--"] + [class^="grid__col--"] {
      margin-left: 2%; }
    [class^="grid__col--"]:last-of-type {
      float: right; } }

.nav__item, .nav__item--current {
  display: inline-block;
  margin: 0 0.75em; }

.nav__item a, .nav__item--current a {
  font-size: 1.125em;
  font-weight: 300;
  display: block;
  padding: 0.44444em;
  border-bottom: 1px solid transparent; }

.nav__item a:hover, .nav__item--current a {
  color: #0b0b0b;
  border-color: #52bab3; }

h1, .headline-primary, .headline-primary--grouped {
  color: #525559;
  font-weight: 300;
  font-size: 2.625em;
  line-height: 1.09524;
  margin-top: 0; }

h2, .headline-secondary, .headline-secondary--grouped {
  color: #999da1;
  letter-spacing: 1px;
  font-weight: 100;
  font-size: 1.5em;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }

.form__btn, [class^="btn--"] {
  padding: 15px 30px;
  border: 0;
  border-radius: 0.4em;
  color: #fff;
  text-transform: uppercase;
  font-size: 0.875em;
  font-weight: 400;
  transition: opacity 0.3s;
  display: block; }
  .form__btn:hover, [class^="btn--"]:hover {
    opacity: .75; }
  .form__btn:active, [class^="btn--"]:active {
    opacity: initial; }

.icn--nav-toggle {
  line-height: 0;
  cursor: pointer; }

.img--wrap {
  border: 1px solid #d6d7d9;
  padding: 0.75em; }
.img--avatar {
  display: block;
  border-radius: 50%;
  margin-top: 1.5em; }
.img--hero {
  margin-bottom: 2.625em; }

.headline-primary {
  margin-bottom: 1.66667em; }
  .headline-primary--grouped {
    margin-bottom: 0; }
.headline-secondary {
  margin-bottom: 0.91667em; }
  .headline-secondary--grouped {
    margin-top: 0.41667em;
    margin-bottom: 2.25em; }

.form__label {
  display: block;
  margin-bottom: 0.625em; }
.form__input {
  font-size: 1.125em;
  margin-bottom: 1.11111em;
  border-bottom: 6px solid #d6d7d9;
  border-radius: 0.4em;
  background: #ebecec;
  color: black;
  font-weight: 300; }
  .form__input:focus {
    border-color: #52bab3; }
.form__btn {
  background: #52bab3; }

.btn--default {
  background-color: #52bab3; }
.btn--success {
  background-color: #5ece7f; }
.btn--error {
  background-color: #e67478; }
.btn--warning {
  background-color: #ff784f; }
.btn--info {
  background-color: #9279c3; }

[class^="btn--"] {
  margin-bottom: 1.42857em; }
  @media (min-width: 1px) and (max-width: 768px) {
    [class^="btn--"] {
      width: 100%; } }
  @media (min-width: 769px) {
    [class^="btn--"] {
      width: auto;
      display: inline-block; }
      [class^="btn--"] + [class^="btn--"] {
        margin-left: 20px; } }

.navbar {
  position: relative;
  margin-top: 3.375em;
  margin-bottom: 0; }

.nav {
  margin-top: 1.25em;
  margin-bottom: 1.875em; }
  .nav__item a {
    color: #797e83; }

.site-logo {
  background-image: url("../img/logo.svg");
  background-repeat: no-repeat;
  width: 115px;
  height: 45px;
  display: inline-block; }

.icn--nav-toggle {
  width: 25px;
  height: 17px;
  border-top: solid 3px #797e83;
  border-bottom: solid 3px #797e83;
  position: relative; }
  .icn--nav-toggle:before {
    width: 25px;
    height: 3px;
    background: #999da1;
    top: 4px; }

/*# sourceMappingURL=application.css.map */

1 Answer

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Because the rules are for [class^=grid__col--] which means anything with a class attribute starting with that. If changed to [class*=grid__col--], then it wouldn't matter where in the class attribute the class appears.

Brendan Whiting
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Brendan Whiting
Front End Web Development Techdegree Graduate 84,738 Points
Brendan Whiting
.a{fill-rule:evenodd;}techdegree seal-36
Brendan Whiting
Front End Web Development Techdegree Graduate 84,738 Points

Interesting. Why would [class*=grid__col—] take precedence over [class*=grid__col—]? There aren’t any rules where “grid__col” appears anywhere other than the beginning. I also still don’t understand why the order of classes in the class attribute in the markup would matter. These people on stack overflow seem to be saying that it doesn’t matter.

But they seem to be wrong, when I change the order it does change the outcome. Where can I learn more about this behavior?

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

The prefix attribute selector looks at the value of the attribute, and then matches if it begins with the specified string, which in this case, is grid__col--. Note that the value of the class attribute is a string containing zero or more classes, separated by spaces.

Here is what the MDN docs on attribute selectors have to say:
[attr^=value] Represents an element with an attribute name of attr and whose first value is prefixed by "value".
[attr*=value] Represents an element with an attribute name of attr and whose value contains at least one occurrence of string "value" as substring.

In your HTML example, you have the following:

<div class="centered grid__col--8">

So that's a div element with a single attribute class, which has a single value of centered grid__col--8. It now starts with centered. If you use the [class*=grid__col—] selector, it matches that string anywhere in the value, so it doesn't matter if it's at the start, end or somewhere in between, or even if there is a space or other characters before or after.

Note that the class selector (.class-name) doesn't care what order the classes are in, but it has to match one of them exactly.

Does that help?

Brendan Whiting
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Brendan Whiting
Front End Web Development Techdegree Graduate 84,738 Points
Brendan Whiting
.a{fill-rule:evenodd;}techdegree seal-36
Brendan Whiting
Front End Web Development Techdegree Graduate 84,738 Points

I understand now. I was thinking the class attribute string got split into individual classes before the attribute selector was tested against it. But the attribute selector is testing the whole string before it gets split apart, so order does matter. Thanks for helping me understand what's going on here.

Samuel Cleophas
Samuel Cleophas
12,348 Points
Samuel Cleophas
Samuel Cleophas
12,348 Points

Dude you are a genius. Thanks so much I was about to throw my computer out of the window due to the lack of my ability to arrive at the cause. I would have given up for the day!