Puis-je appliquer un style CSS à un nom d'élément?

Je travaille actuellement sur un projet dans lequel je n'ai aucun contrôle sur le HTML auquel j'applique des styles CSS. Et le HTML n'est pas très bien étiqueté, en ce sens qu'il n'y a pas assez de déclarations d'identifiant et de classe pour différencier les éléments.

Donc, je cherche des moyens d'appliquer des styles à des objets qui n'ont pas d'id ou d'attribut de classe.

Parfois, les éléments de formulaire ont un attribut "nom" ou "valeur":

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

Existe-t-il un moyen d'appliquer un style basé sur name = "goButton"? Qu'en est-il de la «valeur»?

C'est le genre de chose qu'il est difficile de trouver car une recherche Google trouvera toutes sortes d'instances dans lesquelles des termes généraux tels que «nom» et «valeur» apparaîtront dans les pages Web.

Je soupçonne en quelque sorte que la réponse est non ... mais peut-être que quelqu'un a un hack intelligent?

Tout avis serait grandement apprécié.

Vous pouvez utiliser le sélecteur d'attribut,

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

<input name="goButton">

Sachez qu'il n'est pas pris en charge dans IE6.

Mise à jour: En 2016, vous pouvez à peu près les utiliser comme vous le souhaitez, car IE6 est mort. http://quirksmode.org/css/selectors/

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

Exemple de saisie de texte

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

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

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

Vous pouvez utiliser des sélecteurs d'attributs, mais ils ne fonctionneront pas dans IE6 comme l'a dit Meder, il existe des solutions de contournement javascript pour cela. Vérifiez Selectivizr

Plus de détails sur les sélecteurs d'attributs: 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 }

Pour les futurs googleurs, FYI, la méthode dans la réponse de @meder, peut être utilisée avec n'importe quel élément qui a un attribut de nom, alors disons qu'il y a un <iframe>avec le nom, xyzvous pouvez utiliser la règle comme ci-dessous.

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

L' nameattribut peut être utilisé sur les éléments suivants:

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

Si je comprends bien votre question,

Oui, vous pouvez définir le style de l'élément individuel si son identifiant ou son nom est disponible,

par exemple

si l'identifiant est disponible, vous pouvez avoir le contrôle sur l'élément comme,

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

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

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

sinon si le nom est disponible, vous pouvez avoir le contrôle sur l'élément comme,

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

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

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

L'utilisation [name=elementName]{}sans balise avant fonctionnera également. Cela affectera tous les éléments portant ce nom.

Par exemple:

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

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

C'est le travail parfait pour le sélecteur de requête ...

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

Vous pouvez ensuite parcourir ces collections pour opérer sur les éléments trouvés.

si vous n'utilisez pas le nom dans l'entrée mais un autre élément, vous pouvez cibler un autre élément avec cet attribut.

    [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">

espérons son aide. Je vous remercie

avez-vous exploré la possibilité d'utiliser jQuery? Il a un modèle de sélecteur très large (similaire dans la syntaxe à CSS) et même si vos éléments n'ont pas d'ID, vous devriez pouvoir les sélectionner en utilisant la relation parent -> enfant -> petit-enfant. Une fois que vous les avez sélectionnés, il y a un appel de méthode très simple (j'oublie le nom exact) qui vous permet d'appliquer le style CSS aux éléments.

Il devrait être simple à utiliser et en prime, vous serez probablement très compatible avec plusieurs plates-formes.