Specify class Css within ID

Question

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;
    }
}

subhaze · Accepted Answer · 2012-11-28 02:34:44Z

3

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;
}

answered Nov 28, 2012 at 2:34

subhaze

8,8352 gold badges33 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pete Over a year ago

+1 for Don't nest your selectors like that. The OP might want to brush up on their CSS skills a bit as this is very basic.

MVCKarl · Accepted Answer · 2012-11-28 02:53:31Z

1

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.

edited Nov 28, 2012 at 2:53

answered Nov 28, 2012 at 2:33

MVCKarl

1,2959 silver badges9 bronze badges

3 Comments

ultranaut Over a year ago

Not sure how you can say that he doesn't need to include #User in his rule.

sayth Over a year ago

@MVCKarl I did need to specify an id to ensure it remains separate to other CSS definitions in my file.

MVCKarl Over a year ago

@ultranaut I was pointing out that his CSS syntax was incorrect. Without seeing the rest of his code, I shouldn't assume that he is trying to distinguish between Id's.

John S · Accepted Answer · 2012-11-28 02:34:45Z

0

#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

answered Nov 28, 2012 at 2:34

John S

57310 silver badges23 bronze badges

1 Comment

eozzy Over a year ago

You can't have multiple IDs!

Collectives™ on Stack Overflow

Specify class Css within ID

3 Answers 3

1 Comment

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related