Posso aplicar um estilo CSS a um nome de elemento?

Atualmente, estou trabalhando em um projeto no qual não tenho controle sobre o HTML ao qual estou aplicando estilos CSS. E o HTML não está muito bem rotulado, no sentido de que não há declarações suficientes de identificação e classe para diferenciar os elementos.

Portanto, estou procurando maneiras de aplicar estilos a objetos que não possuem um atributo de id ou classe.

Às vezes, os itens de formulário têm um atributo "nome" ou "valor":

<input type="submit" value="Go" name="goButton">

Existe uma maneira de aplicar um estilo baseado em name = "goButton"? E o "valor"?

É o tipo de coisa difícil de descobrir, porque uma pesquisa no Google encontrará todos os tipos de casos em que termos gerais como "nome" e "valor" aparecerão nas páginas da web.

Suspeito que a resposta é não ... mas talvez alguém tenha um truque inteligente?

Qualquer conselho seria muito apreciado.

Você pode usar o seletor de atributos,

input[name="goButton"] {
  background: red;
}

<input name="goButton">

Esteja ciente de que ele não é suportado no IE6.

Atualização: em 2016, você pode usá-los da maneira que quiser, pois o IE6 está morto. http://quirksmode.org/css/selectors/

http://reference.sitepoint.com/css/attributeselector

Exemplo de entrada de texto

input[type=text] {
  width: 150px;
}

input[name=myname] {
  width: 100px;
}

<input type="text">
<br>
<input type="text" name="myname">

Você pode usar seletores de atributos, mas eles não funcionarão no IE6, como disse Meder, existem soluções em javascript para isso. Verificar Selectivizr

Mais detalhado nos seletores de atributos: http://www.css3.info/preview/attribute-selectors/

/* turns all input fields that have a name that starts with "go" red */
input[name^="go"] { color: red }

Para futuros googlers, o FYI, o método na resposta por @meder, pode ser usado com qualquer elemento que possua um atributo name, então digamos que exista um <iframe>com o nome, xyzentão você pode usar a regra como a seguir.

iframe[name=xyz] {    
    display: none;
}   

O nameatributo pode ser usado nos seguintes elementos:

• <button>
• <fieldset>
• <form>
• <iframe>
• <input>
• <keygen>
• <map>
• <meta>
• <object>
• <output>
• <param>
• <select>
• <textarea>

Se entendi sua pergunta agora,

Sim, você pode definir o estilo do elemento individual se seu ID ou nome estiver disponível,

por exemplo

se id disponível, você pode obter controle sobre o elemento,

<input type="submit" value="Go" name="goButton">

var v_obj = document.getElementsById('goButton');

v_obj.setAttribute('style','color:red;background:none');

caso contrário, se o nome estiver disponível, você poderá obter controle sobre o elemento, como

<input type="submit" value="Go" name="goButton">

var v_obj = document.getElementsByName('goButton');

v_obj.setAttribute('style','color:red;background:none');

Usar [name=elementName]{}sem tag antes também funcionará. Isso afetará todos os elementos com esse nome.

Por exemplo:

[name=test] {
  width: 100px;
}

<input type=text name=test>
<div name=test></div>

Esse é o trabalho perfeito para o seletor de consultas ...

var Set1=document.querySelectorAll('input[type=button]');  // by type

var Set2=document.querySelectorAll('input[name=goButton]'); // by name

var Set3=document.querySelectorAll('input[value=Go]'); // by value

Em seguida, você pode percorrer essas coleções para operar nos elementos encontrados.

se você não estiver usando o nome na entrada, mas outro elemento, poderá direcionar outro elemento com esse atributo.

    [title~=flower] {
      border: 5px solid yellow;
    }

    <img src="klematis.jpg" title="klematis flower" width="150" height="113">
    <img src="img_flwr.gif" title="flower" width="224" height="162">
    <img src="img_flwr.gif" title="flowers" width="224" height="162">

espero que ajude. Obrigado

você explorou a possibilidade de usar o jQuery? Ele possui um modelo de seletor de alcance (semelhante na sintaxe ao CSS) e, mesmo que seus elementos não tenham IDs, você poderá selecioná-los usando o relacionamento pai -> filho -> neto. Depois de selecioná-los, há uma chamada de método muito simples (esqueci o nome exato) que permite aplicar o estilo CSS ao (s) elemento (s).

Deve ser simples de usar e, como bônus, você provavelmente será muito compatível com várias plataformas.