CODEWITHSUNDEEP
asp.nethtmlcss
sayth
sayth

Reputation: 7048

Specify class Css within ID

How do I identify in my CSS file classes of an id.

So in my html file I create a basic label and textbox.

<div id="User">
    <div>
        <div class="left">
            <asp:Label ID="Label1" runat="server" Text="User Name"></asp:Label>
        </div>
        <div class="right">
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        </div>
    </div>
</div>

But how can I access class left and right in my CSS file, this is what I had.

#User
{
    .left {
        width: 30%;
        float: left;
        text-align: right;
    }
    .right {
        width: 65%;
        margin-left: 10px;
        float:left;
    }
}

Upvotes: 0

Views: 96

Answers (3)

MVCKarl
MVCKarl

Reputation: 1295

You don't need the #User part. The following is sufficient

.left 
{
 width: 30%;
 float: left;
 text-align: right;
}

.right 
{
 width: 65%;
 margin-left: 10px;
 float:left;
}

The only reason why you would add the #User part is to distinguish between other div's that might have the class of .left and .right for example if you wanted to do that then you would go

#User .left {  background-color: blue; }
#User .right { /** CSS Code in here **/ }

<div id="User">
    <div class="left">Testing Left</div>
    <div class="right">Testing Right</div>
</div>
<br />
<br />
<div id="User2">
    <div class="left">Testing Left2</div>
    <div class="right">Testing Right2</div>
</div>

In this case only the first .left will have a blue background.

Upvotes: 1

John S
John S

Reputation: 573

#user.left and #user.right

should work. you can do the same with tags like td.left will only target td elements with the class left.

EDIT: and yes dont nest like MVCKarl said

Upvotes: 0

subhaze
subhaze

Reputation: 8855

Don't nest your selectors like that. This should work

#User .left {
  width: 30%;
  float: left;
  text-align: right;
}
#User .right {
  width: 65%;
  margin-left: 10px;
  float:left;
}

Upvotes: 3

Related Questions