CODEWITHSUNDEEP
css
jordan sandberg
jordan sandberg

Reputation: 182

CSS - style for one element written inside the brackets of a different element?

Lets start out by saying that I am not great at writing CSS...so this may require some patience

I was following this tutorial: https://css-tricks.com/float-labels-css/

And it was my first time seeing CSS written with the following syntax:

form {
  width: 320px;
  float: left;
  margin: 20px;

  /* This is the part I am confused about */
  > div { 
    position: relative;
    overflow: hidden;
  }
}

Maybe this is a stupid question, but is this the same as

form { 
   width: 320px;
   float: left;
   margin: 20px;
}
form > div {
   position: relative;
   overflow: hidden;
}

?

I am trying to utilize this syntax but I cannot quite figure it out. Can someone explain it to me please? :) Also, does this syntax have a name? I am having trouble even looking it up. Thank you!

Upvotes: 0

Views: 321

Answers (1)

marks
marks

Reputation: 1391

Look for scss/sass. You will then write .scss files and then compile those to .css. You can simply install it via npm and then tell your IDE to automatically compile the files on save - or will have to make npm watch the files if you editor doesn't support it. But yeah, simply look for "how to install scss"

Upvotes: 3

Related Questions