CODEWITHSUNDEEP
htmlcss
richards
richards

Reputation: 527

CSS div class not recognized

Hi I'm having this problem with CSS: I'm using the form group like this:

<form class="form-horizontal">
    <div class="form-group"> <!-- or "form-group-test"-->
        <label class="col-xs-4 plate-control-label">...

the plate-control-label is defined by myself in the CSS file like this:

.form-horizontal .plate-control-label {...}

and it works normally; but when I tried to do similar things to div:

.form-horizontal .form-group-test {...}

then it is not recognized. I have to define it like this:

.form-horizontal .form-group {...}

In this way it works, but as form-group is a pre-defined element, I don't want to change it. Why is this?

EDIT: Sorry just now missed the ". I'm not copying the code directly.

EDIT2: Okay I tried in fiddle and it works, but in my own code it's still not okay. The elements are contained inside these divs:

<div class="panel-body panel-container" style="overflow: auto">
    <div class="col-xs-12">
        <div style="float: left; width: 35%">

Could this cause the problem? Thank you all for the previous reminders and advice.

Upvotes: 1

Views: 2970

Answers (1)

dippas
dippas

Reputation: 60543

you're not closing the class here:

<label class="col-xs-4 plate-control-label>

should be like this

<label class="col-xs-4 plate-control-label">

UPDATE based on your updated question

Forgetting the typo mentioned above.

Regarding to this:

and it works normally; but when I tried to do similar things to div:

.form-horizontal .form-group-test {...}

won't work because you don't have a class in your HTML named .form-group-test,

so in order to make that line to work you need to change your HTML to this:

<form class="form-horizontal">
    <div class="form-group-test"> 
        <label class="col-xs-4 plate-control-label">

if you want to use form-group due to be a predefined element, you use like this:

CSS:

.form-horizontal .form-group -- to target .form-group

.form-horizontal .form-group-test .plate-control-label -- to target plate-control-label

HTML:

 <form class="form-horizontal">
        <div class="form-group"> 
            <label class="col-xs-4 plate-control-label">

Upvotes: 4

Related Questions