Apply style to elements in a div with a class

Question

What I am able to do:

HTML:

<div id="test">
    HELLO! 
    <input type="text">
</div>

CSS:

#test {
   color:#F00;
}

#test input[type=text] {
   background-color:#000;
}

What I'd like to do is the same thing if the #test has not an ID but a class:

<div class="test">
   ...

How should I write the CSS in this case?

#test, .test {} and #test input[type="text"], .test input[type="text"] {} if you weirdly need to be able to handle both cases. — thirtydot
– thirtydot, Commented Jul 26, 2013 at 15:22

tymeJV · Accepted Answer · 2013-07-26 15:15:48Z

3

Use . to signify a class.

.test {
    color: red;
}

answered Jul 26, 2013 at 15:15

tymeJV

105k14 gold badges165 silver badges158 bronze badges

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

3 Comments

Perocat Over a year ago

Yes... this is not the problem... My problem is about the input under the class

tymeJV Over a year ago

Add input after the .test, so .test input

Jason M. Batchelor Over a year ago

Same concept... see DevlshOne's answer to have it spelled out for you. Also would recommend that you take some time to go through one of the many many CSS tutorials on the web. (I have to say that this is the first time I've seen someone using the attribute-selector and /not/ understand basic class-selectors first!)

DevlshOne · Accepted Answer · 2013-07-26 15:16:15Z

2

Simply replace the # with a . (period):

.test {
   color:#F00;
}

.test input[type=text] {
   background-color:#000;
}

answered Jul 26, 2013 at 15:16

DevlshOne

8,4671 gold badge31 silver badges38 bronze badges

Collectives™ on Stack Overflow

Apply style to elements in a div with a class

2 Answers 2

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Related