Search code examples
htmlcsstwitter-bootstrapcompass-sasspseudo-class

First- and last-child in bootstrap/sass not working

I am having trouble using the first- and last-child pseudo classes in my Bootstrap/Sass code. Basically, I am looking to create a whole bunch of blank space above/below the first and last header only. Compass is running, and it's not giving me an error, but when I hard refresh my page in the browser nothing changes. Here is my code, CSS first: 

$headings-small-color: black;

@import "bootstrap-compass";
@import "bootstrap-variables";
@import "bootstrap";

h1 {
  font-family: 'Almendra SC', serif;
}

h1:first-child, h1:last-child {
  margin-top: 200 px;
}

small {
  font-family: 'Fanwood text', serif;

}


<!DOCTYPE html>
<html lang="en">

  <head>
    <title>Cat Graveyard</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="stylesheets/styles.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Fanwood+Text|Almendra+SC' rel='stylesheet' type='text/css'>
  </head>

  <body>

    <img src="Cat_graveyard_cover2.jpg" class="img-responsive" alt="Cover image">

    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-8 col-md-offset-2">
          <h1>Here Lieth <small>the poor victims of two notorious whiskered criminals.</small></h1>
          <h1>Warning: <small>Graphic images of mangled inanimate objects below.</small></h1>
          <h1>Viewer Discretion <small> is advised for sensitive stuffed animals.</small></h1>
        </div>
      </div>
    </div>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>

</html>

I do realize that the more appropriate "Sassy" way would be to use a variable for these pseudo classes (and if you would like to give me an example, that'd be okay with me!), but right now my goal is just to get it to work.

I'm assuming my issue has to do with specificity re: Bootstrap. I'm at a loss of how to fix this, however. In the CSS generated by Compass, the CSS I wrote for the pseudo classes appear last. But, when I "inspect element" in the browser it shows the bootstrap CSS overriding the CSS I wrote.

IDK what to do at this point, any insight would be greatly appreciated!

Solution

  • Just a little typo

    h1:first-child, h1:last-child {
  margin-top: 200 px;
}

    should be

    h1:first-child, h1:last-child {
  margin-top: 200px;
}