Menu
Relatively new to LESS and trying out how nesting works. I have read the things on the less page.
HTML
<!DOCTYPE html>
<html>
<head class="Setup">
<link rel="stylesheet/less" type="text/css" href="../LESS/core.less"/>
</head>
<div class="Test">
<span id="Test1" class="Test2"></span>
</div>
</html>
LESS
.Test2 {
display: block;
#Test1 {
.background1;
width: 40px;
height: 1000px !important;
}
}
but if I were to write it without the nesting it works
.Test2 {
display: block;
}
#Test1 {
.background1;
width: 40px;
height: 1000px !important;
}
.background is just {background: red;}. Is the concept just messed up in my head?
709
asked Apr 29 '16 12:04
ID Selector in CSS CSS ID will override CSS Class properties. To select an element with a specific id, write a hash (#) character, followed by the id of the element.
CSS ID selector To use an ID selector in CSS, you simply write a hashtag (#) followed by the ID of the element. Then put the style properties you want to apply to the element in brackets.
The basic rule that you need to keep in mind while using classes and ids in CSS is that, id is used for single elements that appear on the page for only once (e.g. header, footer, menu), whereas class is used for single or multiple elements that appear on the page for once or more than once (e.g. paragraphs, links, ...
To select elements with a specific class, write a period (.) character, followed by the name of the class. You can also specify that only specific HTML elements should be affected by a class. To do this, start with the element name, then write the period (.)
Nesting Issues and Mismatched Markup
Nesting generally indicates that a particular element will appear beneath another element, so your current code has the right idea.
Currently your nesting example would attempt to target an element with an id of "Test1" that was nested below an element with the class "Test2", which isn't the same as your markup.
If you wanted to use the same markup to target your element, consider changing your outermost .Test2 selector to .Test instead :
/* This will target an element with id "Test`" below an element with class "Test" */
.Test {
display: block;
#Test1 {
width: 40px;
height: 1000px !important;
}
}
You can see how this is translated to CSS below :
Background Check Your Syntax
Additionally, there appears to be an issue with your .background selector that you were using. Did you mean to target an additional style below your "Test2" element like the following example?
.Test {
display: block;
#Test1 {
.background{
width: 40px;
height: 1000px !important;
}
}
}
which would compile as follows :
97
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
