CODEWITHSUNDEEP
css
Coding Duchess
Coding Duchess

Reputation: 6909

Nesting elements in css

I have the following html:

<div class="m-card-with-icon">
   <div class="top bg-green">
      <img class="icon" src="images/img1.png"/>
      <h3>Title1</h3>
  </div>
  <p class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus varius rutrum aliquet.</p>

</div>

and I am trying to apply some css to the image.

When I try

.m-card-with-icon {
min-height: 244px;
text-align: left;
background-color: #fafafa;
color: #848484;
cursor: pointer;
display: block;
position: relative;


   .top {
        min-height: 100px;
        line-height: 60px;
        padding: 20px 180px 20px 40px;
        text-transform: capitalize; 
        display: table;
        width: 100.5%;


        img.icon {
            position: absolute;
            right: 25px;
            top: 25px;
            width: 140px;
            height: 140px;
            background-color: #fff;
            border-radius: 100%;
            padding: 10px;
            display: table-cell;
            vertical-align: middle;
        }


   }

}

whatever style I apply to img.icon does not show up - the images remain left-aligned.

Is there a problem with how I am nesting css?

Upvotes: 0

Views: 87

Answers (3)

john c. j.
john c. j.

Reputation: 1185

Probably, you want this:

(We don't use nesting. Instead, you can "simulate" nesting by put parent element before child: .m-card-with-icon .top).

.m-card-with-icon {
    min-height: 244px;
    text-align: left;
    background-color: #fafafa;
    color: #848484;
    cursor: pointer;
    display: block;
    position: relative;
}

.m-card-with-icon .top {
    min-height: 100px;
    line-height: 60px;
    padding: 20px 180px 20px 40px;
    text-transform: capitalize; 
    display: table;
    width: 100.5%;
}

.m-card-with-icon .top img.icon {
    position: absolute;
    right: 25px;
    top: 25px;
    width: 140px;
    height: 140px;
    background-color: #fff;
    border-radius: 100%;
    padding: 10px;
    display: table-cell;
    vertical-align: middle;
}

Upvotes: 2

greatgumz
greatgumz

Reputation: 418

On another note, if you have control over the HTML, it would be ideal to use something like SMACSS or BEM.

Instead of nesting, you'll find that if you scope your CSS to use a single, unique class for every specific node. If you use a name prefixing methodology you can keep your class names organized.

For example rather than .m-card-with-icon top {} you can target .m-card-with-icon-top {}

Nesting can create complicated specificity rules and performance problems and you may find that a flat CSS might make your CSS more object oriented and modular.

Upvotes: 0

Irfan
Irfan

Reputation: 81

I don't think you can nest using css, but rather use scss or sass or less. if you use scss then it will become

.m-card-with-icon {
  min-height: 244px;
  text-align: left;
  background-color: #fafafa;
  color: #848484;
  cursor: pointer;
  display: block;
  position: relative;

   .top {
    min-height: 100px;
    line-height: 60px;
    padding: 20px 180px 20px 40px;
    text-transform: capitalize; 
    display: table;
    width: 100.5%;

      .icon {
        position: absolute;
        right: 25px;
        top: 25px;
        width: 140px;
        height: 140px;
        background-color: #fff;
        border-radius: 100%;
        padding: 10px;
        display: table-cell;
        vertical-align: middle;
      }
   }
 }

Upvotes: 0

Related Questions