Can't style certain div with css

Question

I'm styling this page and yet I can't seem to access either .4thForm or .3rdForm to style. These elements move responsively when screensize drops below 1024px so it's cruitial that I access these elements.

I've tested the @media call and I can change the colour .frontbannertitle with it so I know it's not the media call. Using inspector I can code the element to achieve what I would like, but it will not let me generate a css element to style it.

I need to edit this div to provide it with a negative margin-top value, as that cannot be achieved by targeting the select within the div.

Jsfiddle: http://jsfiddle.net/P49ja/

<form class="frontbannercontainer form-horizontal">
    <fieldset class="frontbanner">
        <h1 class="frontbannertitle">Enquire Now!</h1>
        <div class="control-group">
            <div class="controls">
                <input id="textinput1" class="frontbannertext input-xlarge" type="text" name="textinput">
            </div>
        </div>
        <div class="control-group">
            <div class="controls">
                <input id="textinput2" class="frontbannertext input-xlarge" type="text" name="textinput">
            </div>
        </div>
        <div class="control-group">
            <div class="controls 3rdForm">
                <input id="textinput3" class="frontbannertext input-xlarge" type="text" name="textinput">
            </div>
        </div>
        <div class="control-group">
            <div class="controls 4thForm">
                <select id="selectbasic" class="frontbannerselect input-xlarge" name="selectbasic">
                    <option selected="selected" disabled="disabled" value="0">Select Membership</option>
                    <option value="1">Individual Membership</option>
                    <option value="2">Corporate Membership</option>
                </select>
            </div>
        </div>
        <div id="SliderFormPhone">
            <span id="ques">Enquire By Phone:</span>
            <span id="ph">(02) 000 000</span>
        </div>
        <div class="control-group">
            <div class="controls">
                <button id="singlebutton" class="frontbannerbutton btn btn-primary" name="singlebutton">Apply!</button>
            </div>
        </div>
    </fieldset>
</form>

Thanks!

can you show us your css? & it would be great if you can create a **[fiddle](http://jsfiddle.net/)** — Imran Bughio, May 13 '14 at 05:17
You have `ID`s overriding your `classes`. Just saying it's likely, based on the fact I can't see your `css`. But even then, there are better ways to accomplish this. Toss a [jsFiddle](http://jsfiddle.net) out here....? — Nicholas Hazel, May 13 '14 at 05:17
Just threw a jsfiddle up. the surrounding CSS doesn't do much at the moment in terms of pageflow, so shouldn't affect calling an element I don't think. — Vaux42, May 13 '14 at 05:25
Check the class naming conventions plz. First letter must be character — SSS, May 13 '14 at 05:32

Imran Bughio · Accepted Answer · 2014-05-13T05:52:04.350

3

DEMO

You can not start a class with a number in your case it's .4thForm

Change it to something like .Form4th

edited May 13 '14 at 05:52

answered May 13 '14 at 05:31

Imran Bughio

4,811
2
30
53

score 2 · Answer 2 · edited May 23 '17 at 12:14

2

I think you cannot use "3rdForm" as a valid class selector. The first character cannot be numeric.

Refer to this SO answer.

I added "thirdForm" as a class to your fiddle and was able to style it properly. So I'm assuming that is the issue.

edited May 23 '17 at 12:14

Community

1
1

answered May 13 '14 at 05:35

Serendipity

1,015
1
10
19

Suresh Ponnukalai · Answer 3 · 2014-05-13T05:49:57.657

2

you need to add special character "\3" to access this class like below..

.\34thform{
display:none;    
margin-top:-7em;
  }

sample jsfiddle below... http://jsfiddle.net/P49ja/4/

edited May 13 '14 at 05:49

answered May 13 '14 at 05:36

Suresh Ponnukalai

13,820
5
34
54

Can't style certain div with css

3 Answers3

DEMO