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

Félix Guérin
Félix Guérin
17,910 Points
Posted by Félix Guérin
Félix Guérin
17,910 Points

Class vs Element selector

I tried to replicate a code. The HTML had some classes in it but I didn't bother using them in the CSS since there was only one element of each. I thought the styles would be applied in the exact same way with both codes, but my "line-height" declaration was not applied unless I used the class selectors.

Here is the HTML:

<body>
    <div class="container">
        <a href="#" class="btn"><i></i></a>
        <a href="#" class="btn"><i></i></a>
        <a href="#" class="btn"><i></i></a>
        <a href="#" class="btn"><i></i></a>
        <a href="#" class="btn"><i></i></a>
    </div>
  </body>
</html>

Here is the CSS I wrote:

a {
  position: relative;
  overflow: hidden;
  display: inline-block;
  width: 90px;
  height: 90px;
  color: #3498db;
  margin: 10px;
  background: #f1f1f1;
  border-radius: 30%;
  box-shadow: 0 5px 15px -5px rgba(0,0,0,0.7);
}
i {
  line-height: 90px;
  font-size: 26px;
  transition: 0.2s;
}

Here is the CSS I was replicating:

.btn {
  position: relative;
  overflow: hidden;
  display: inline-block;
  width: 90px;
  height: 90px;
  color: #3498db;
  margin: 10px;
  background: #f1f1f1;
  border-radius: 30%;
  box-shadow: 0 5px 15px -5px rgba(0,0,0,0.7);
}
.btn i {
  line-height: 90px;
  font-size: 26px;
  transition: 0.2s;
}

Does anybody know why the line-height declaration was not applied with the element selectors?

Thanks,

Felix

Mark Wilkowske
Mark Wilkowske
Courses Plus Student 18,131 Points
Mark Wilkowske
Mark Wilkowske
Courses Plus Student 18,131 Points

Hi Felix, what leads you to believe line-height is not applied for the element selectors?

Félix Guérin
Félix Guérin
17,910 Points
Félix Guérin
Félix Guérin
17,910 Points

Hey Mark,

From what I understand, a line-height of 90px in a 90px by 90px container (the a element in this case) would center the icon vertically, which was the case when targeted with the class selector. However, the icon remained at the top of the a element when targeted by the element selector.

Maybe there's something else I'm not seeing?

Mark Wilkowske
Mark Wilkowske
Courses Plus Student 18,131 Points
Mark Wilkowske
Mark Wilkowske
Courses Plus Student 18,131 Points

I can see line-height applied either way when the html looks like this - assuming <i> should contain something:

<a href="#" class="btn"><i>text</i></a>
Félix Guérin
Félix Guérin
17,910 Points
Félix Guérin
Félix Guérin
17,910 Points

Indeed, when I put some text in the icon it works. My problem is with icons from https://fontawesome.com/.

The code looks like this:

<a href="#" class="btn"><i class="fab fa-twitter"></i></a>

In that case, the icon stays at the top of the link instead of being centered, hence why I thought the line-height declaration was not applied.

Mark Wilkowske
Mark Wilkowske
Courses Plus Student 18,131 Points
Mark Wilkowske
Mark Wilkowske
Courses Plus Student 18,131 Points

Probably a CSS override issue. I'm afraid I can't be more specific because you've just provided code snippets.

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 also tried to replicate and both your rewrite and the original seem the same. Looked in the Chrome DevTools and the styles from the i element are being applied and nothing showed and overridden with strikethrough text.

Carlos Hempel
Carlos Hempel
8,303 Points
Carlos Hempel
Carlos Hempel
8,303 Points

Hey Felix,

I tried to replicate your code and what you should do is to add line-height to the class .btn and then again on .btn i. See below and let me know if this works for you.

Here is the modified css:

 .btn {
  position: relative;
  overflow: hidden;
  display: inline-block;
  width: 90px;
  height: 90px;
  line-height: 90px;
  color: #3498db;
  margin: 10px;
  background: #f1f1f1;
  border-radius: 30%;
  box-shadow: 0 5px 15px -5px rgba(0,0,0,0.7);
}
.btn i {
  line-height: 90px;
  font-size: 26px;
  transition: 0.2s;
}

Try adding an Icon to your code so you can have a better view. Here is the whole doc

<html>
  <head>
    <style>
      .btn {
      position: relative;
      overflow: hidden;
      display: inline-block;
      width: 90px;
      height: 90px;
      line-height:90px;
      color: #3498db;
      margin: 10px;
      background: #f1f1f1;
      border-radius: 30%;
      box-shadow: 0 5px 15px -5px rgba(0,0,0,0.7);
      }
      .btn i {
      line-height:90px;
      font-size: 26px;
      transition: 0.2s;
      }
    </style>
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
  </head>
<body>
    <div class="container">
        <a href="#" class="btn"><i class="fas fa-thumbs-up"></i></a>
        <a href="#" class="btn"><i></i></a>
        <a href="#" class="btn"><i></i></a>
        <a href="#" class="btn"><i></i></a>
        <a href="#" class="btn"><i></i></a>
    </div>
  </body>
</html>

Thanks

Félix Guérin
Félix Guérin
17,910 Points
Félix Guérin
Félix Guérin
17,910 Points

Hey Carlos,

It worked!

So basically, if I use the class selectors '.btn {}' and '.btn i {}', I only have to specify the line-height property for '.btn i {}'.

If I use the elements selectors 'a {}' and 'a i {}', then I have to specify the line-height for both.

No idea why that is though.