¿Puedo aplicar un estilo CSS al nombre de un elemento?

Actualmente estoy trabajando en un proyecto donde no tengo control sobre el HTML al que estoy aplicando estilos CSS. Y el HTML no está muy bien etiquetado, en el sentido de que no hay suficientes declaraciones de id y clase para diferenciar entre elementos.

Por lo tanto, estoy buscando formas de aplicar estilos a los objetos que no tienen una identificación o atributo de clase.

A veces, los elementos de formulario tienen un atributo "nombre" o "valor":

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

¿Hay alguna manera de aplicar un estilo basado en name = "goButton"? ¿Qué pasa con el "valor"?

Es el tipo de cosas que es difícil de descubrir porque una búsqueda en Google encontrará todo tipo de casos en los que términos generales como "nombre" y "valor" aparecerán en las páginas web.

Sospecho que la respuesta es no ... ¿pero tal vez alguien tiene un truco inteligente?

Cualquier consejo sería muy apreciado.

Puedes usar el selector de atributos,

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

<input name="goButton">

Tenga en cuenta que no es compatible con IE6.

Actualización: en 2016 puedes usarlos como quieras, ya que IE6 está muerto. http://quirksmode.org/css/selectors/

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

Ejemplo de entrada de texto

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

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

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

Puede usar selectores de atributos, pero no funcionarán en IE6, como dijo meder, aunque existen soluciones alternativas de JavaScript. Comprobar selectivizr

Más detallado en los selectores 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, FYI, el método en la respuesta de @meder, se puede usar con cualquier elemento que tenga un atributo de nombre, así que digamos que hay un <iframe>con el nombre y xyzluego puede usar la regla de la siguiente manera.

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

El nameatributo se puede usar en los siguientes elementos:

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

Si entiendo tu pregunta en ese momento,

Sí, puede establecer el estilo del elemento individual si su id o nombre está disponible,

p.ej

si la identificación está disponible, entonces puede obtener control sobre el elemento como,

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

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

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

de lo contrario, si el nombre está disponible, puede obtener control sobre el 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]{}sin etiqueta antes también funcionará. Afectará a todos los elementos con este nombre.

Por ejemplo:

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

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

Este es el trabajo perfecto para el selector 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

Luego puede recorrer estas colecciones para operar en los elementos encontrados.

Si en caso de que no esté utilizando el nombre en la entrada, sino otro elemento, puede seleccionar otro elemento con su 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 sea de ayuda. Gracias

¿Has explorado la posibilidad de usar jQuery? Tiene un modelo de selector de gran alcance (similar en sintaxis a CSS) e incluso si sus elementos no tienen ID, debería poder seleccionarlos usando la relación padre -> hijo -> nieto. Una vez que los haya seleccionado, hay una llamada a un método muy simple (se me olvida el nombre exacto) que le permite aplicar el estilo CSS a los elementos.

Debe ser fácil de usar y, como beneficio adicional, lo más probable es que sea muy compatible con varias plataformas.