Jump to content

Noobice input[type=...]


pemoamsi
 Share

Recommended Posts

Bom dia,

Quando eu uso algo como


button {
position:relative;
overflow:hidden;
width:4.125rem;
}

Altera todos os meus buttons, por ex:

<button type="submit">Actualize</button>

Enquanto que se usar "class" isso já não acontece, ou seja, só altero os buttons que têm determinada class

.esquerda {
position:relative;
overflow:hidden;
width:4.125rem;
}

<button type="submit" class="esquerda">Actualize</button>

Agora a minha questão é, e quando uso

input[type="checkbox"]{
 position: relative;
 top: 14px;
 right: 12px;
 float: right;
}

Isto altera todas as checkbox, e como faço para alterar apenas as que sâo class="lista" ?

Edited by pemoamsi
Link to comment
Share on other sites

Outro truque é:

button.esquerda {
       position:relative;
       overflow:hidden;
       width:4.125rem;
}

que vai afectar todos os botões com a classe esquerda.

Portanto, se fizeres:

input[type="checkbox"].lista {
 position: relative;
 top: 14px;
 right: 12px;
 float: right;
}

deves conseguir o que pretendes.

“There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies, and the other way is to make it so complicated that there are no obvious deficiencies. The first method is far more difficult.”

-- Tony Hoare

Link to comment
Share on other sites

Outro truque é:

button.esquerda {
	position:relative;
	overflow:hidden;
	width:4.125rem;
}

que vai afectar todos os botões com a classe esquerda.

Portanto, se fizeres:

input[type="checkbox"].lista {
 position: relative;
 top: 14px;
 right: 12px;
 float: right;
}

deves conseguir o que pretendes.

Era mesmo essa a dúvida, funcionou correctamente, obrigado 🙂

Link to comment
Share on other sites

Mas neste caso teria que ser:

input[type="checkbox"][class="lista"]

que é muito mais verboso.

“There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies, and the other way is to make it so complicated that there are no obvious deficiencies. The first method is far more difficult.”

-- Tony Hoare

Link to comment
Share on other sites

Mas neste caso teria que ser:

input[type="checkbox"][class="lista"]

que é muito mais verboso.

sim, assim seria ainda mais restrito

felizmente é possivel criar selectores bastante complexos, que a alguma altura do percurso profissional, vamos ter que encarar...

B2R » Beat2Revolution v3.0b | Regista e divulga-nos

beat2revolution.net
Link to comment
Share on other sites

Mas não é mais restrito. Esse selector é o mesmo que:

input[type="checkbox"].lista

Não é assim tão complicado achar os selectores para determinados objectos. Em casos em que tens que lidar com múltiplas variantes que partilham alguns dos mesmos atributos CSS podes configurar múltiplas classes e juntar no selector as várias classes que precisas para obteres uma configuração. Por exemplo:

div.status.error a { color: red; } /* os elementos 'a' das divs com as classes 'status' e 'error' vão ser vermelhos */
Edited by KTachyon

“There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies, and the other way is to make it so complicated that there are no obvious deficiencies. The first method is far more difficult.”

-- Tony Hoare

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.