Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Utilizar id ou elemento

Olá, durante a aula 11 o instrutor comenta que podemos utilizar o id para realizar os ajustes do input do nome:

#nome {
    width: calc(100% - 2em);
    position: relative;
    left: 2em;
}

Eu percebi que também utilizamos os elementos para realizar alguns ajustes, por exemplo:

input[type="text"],
input[type="email"],
textarea {
    font-family: inherit;
    font-size: 100%;
    padding: .25em .5em;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #ccc;
}

input[value="Outro"] ~ input {
    display: none;
}

Utilizar o id seria para algo mais específico, enquanto que utilizar os elementos seria algo mais genérico, por exemplo o input[type="text"], pegaria todos os input com type "text". Foi isso que eu entendi.

Minha dúvida é se existe algum outro motivo ou qual a diferença (além dessa que eu citei) entre utilizar, por exemplo:

input[value="Outro"] ~ input {
    display: none;
}

ou

#outro ~ input {
    display: none;
}

Obrigado.

4 respostas

Oi Ivan,

Exato, dá pra selecionar de várias formas mesmo.

Nesse seletor, acredito que o intuito do instrutor foi demonstrar que podemos selecionar de várias maneiras, mesmo sem o ID ou uma classe.

Quero pegar o input que vem depois de um ID X ou um input com valor 'Outro'.

Espero ter ajudado e bons estudos,

Abcs!

Olá Natan.

Beleza, imaginei que seria algo nesse sentido, mas você saberia me dizer qual seria a forma mais correta? Se existe alguma diferença de performance entre utilizar o elemento ou ID?

Obrigado.

solução!

Oi Ivan,

Nao tem a forma mais correta, depende muito do seu objetivo.

O ganho de performance de voce selecionar com ID em vez de uma classe ou elemento normal é tão pouco, que não vale deixar como risco futuro você ter um problema de especificidade CSS.

Em geral, classes sao bacanas se voce deixar seu CSS bem organizado.

Recomendo ler esse post que fala sobre como organizar CSS em componentes.

Abcs!

Beleza Natan, muito obrigado!