CODEWITHSUNDEEP
htmlcsscss-selectors
onnynneji
onnynneji

Reputation: 33

Select childs of a class in CSS

I have a code in html similar of 

<div class="form">
<form>
<input type="text"/>
<input type="submit"/>
</form>
</div>

and I would like to select all inputs of the div which have a attribute class=form

I tried this in CSS but without success:

.form > input {}
div[class="form"] > input {}
div[class=form] > input {}

So please how to select childs elements of a class in CSS ?

Thanks in advance ;)

Upvotes: 0

Views: 115

Answers (5)

Leo
Leo

Reputation: 13828

> means child, while in your code input is not a child (or a direct descendant) of div.

you should use descendant selector:

.form input {}
div input {}

if you want a child selector, these are correct:

.form > form > input {}
div > form > input {}

Upvotes: 6

yogihosting
yogihosting

Reputation: 6292

You are basically need all the inputs inside div with class="form". Below is the CSS for it.

.form input
{
  /*Your css for the inputs*/   
}

Your could also write it as-

div.form input
{
  /*Your css for the inputs*/   
}

Upvotes: 0

p0d4r14n
p0d4r14n

Reputation: 681

If you want all inputs in your form class styled:

.form input {}

what you used

>

is a selector. For more information on selectors look at this link Selectors

Upvotes: 0

mininao
mininao

Reputation: 11

It should work with

.form input {
    /*your css code*/
}

Do not use the > in this case, it only selects the direct children

Upvotes: 1

Vitorino fernandes
Vitorino fernandes

Reputation: 15951

div.form form input { ... }

you can target a div which have a class like this div.classname

Upvotes: 1

Related Questions