Home > front end >  How to do nesting in css & link it with html?
How to do nesting in css & link it with html?

Time:11-17

I wrote my CSS in .scss file but it did not reflect when I linked it with HTML code. And, when I wrote the same code in .css file, it did work. But again, in normal CSS I am not able to perform nesting.

If anyone can help, please do.

CodePudding user response:

You can put a space between the classes or Selectors, nested in your HTML file. Here is an Example for you,

div h3:nth-child(1){
color:red;
font-size:20px;
font-weight:bold;
}

.container h3:nth-child(2){
color:skyblue;
font-size:20px;
font-weight:bold;
}

.container .Heading{
color:blue;
font-size:20px;
font-weight:bold;
}

*/
<body>
<div class="container">
<h3>Hello Google</h3>
<h3>Hello Twitter</h3>
<h3 class="Heading">Hello Facebook</h3>
</div>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response:

The straight forward answer is, nesting syntaxes which are provided by SCSS is not available in core CSS. So you can't nest selectors in CSS as you can do in SCSS.
And basically, SCSS and all preprocessor CSS are converted to core CSS only after processing. So be comfortable with core CSS.

  • Related