CODEWITHSUNDEEP
cssless
Gensoki
Gensoki

Reputation: 133

How would I target an id within a class in LESS?

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?

Upvotes: 6

Views: 7036

Answers (1)

Rion Williams
Rion Williams

Reputation: 76577

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 :

enter image description here

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 :

enter image description here

Upvotes: 10

Related Questions