Problem with ID Selector in CSS

Question

Problem with ID Selector in CSS

Navigation

#1 by (2 votes)

-1

My problem is this: I have a file css , there are 2 types of form, one for contact and another for another type of contact, but forms conflicts that one is unconfigured and the other normal. I did a quick search on how I could fix this, I discovered the CSS ID Selectors, however when I applied this to my css and my html it was completely buggy.

I've already referenced the ID in the html file and referenced the tags in css but nothing changes, still bugged. Well, the code css looks like this:

 @media(XXXX){
 form > div {XXXX}
 .col-submit {display: block;}

 .col-2 {XXXX}
 .col-3 {XXXX}
 .col-31 {XXXX}
 .col-4 {XXXX}
 .col-5 {XXXX}

 .col-submit button {XXXX}
 }

 form {XXXX}

 form > div > label {XXXX}
 form > div.switch > label {XXXX}

 form > div > .col-4 {XXX}

 label > input {XXXX}

And the html like this:

<div class="map-wrapper">
    <form onsubmit="return false">
        <div class="col-2">
            <label>
                Nome
                <input placeholder="Nome Inteiro" id="name" name="name" tabindex="1">
            </label>
        </div>
        <div class="col-2">
            <label>
                Empresa
                <input placeholder="Nome da Empresa" id="company" name="company" tabindex="2">
            </label>
        </div>
        [..]
        <div class="col-submit">
            <button class="btn btn-submit">Enviar Mensagem</button>
        </div>
    </form>

I just need the form to enter the selector, the rest is fine.

In short, I need css changing this form that way and another form the other way.

For those who do not understand , I just need this css do not change the other form of the site.

Obs

Solving this problem, the other form of the site will repair itself.

html css

asked by anonymous 08.04.2016 / 21:55

1 answer

What is the KEY used in the frameworks? Check null, how to proceed? [closed]

score 2 · Accepted Answer

Assign a id to form , then reference it by ID in CSS .

form input {
  border-radius: 5px;
  margin-bottom: 5px;
}

form#vermelho input {
  border: 1px solid red;
}

form#verde input {
  border: 1px solid green;
}

form#azul input {
  border: 1px solid blue;
}

<form id="vermelho">
  <label>
    Vermelho:
    <input type="text" />
  </label>
</form>

<form id="verde">  
  <label>
    Verde:
    <input type="text" />
  </label>
</form>

<form id="azul">
  <label>
    Azul:
    <input type="text" />
  </label>
</form>