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

Question

Je suis actuellement en train de travailler sur un projet où je n'ai pas de contrôle sur le code HTML que je suis à l'application de feuilles de style CSS. Et le HTML n'est pas très bien étiqueté, dans le sens où il n'y a pas assez d'id et les déclarations de classe pour différencier entre les éléments.

Donc, je suis à la recherche de façons d'appliquer des styles à des objets qui n'ont pas un id ou une classe d'attribut.

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

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

Est il possible que je peux appliquer un style basé sur name="goButton"? Que dire de "valeur"?

C'est le genre de chose qui est difficile à trouver, car une recherche sur Google va trouver toutes sortes de situations dans lesquelles large des termes tels que "nom" et "valeur" apparaîtra dans les pages web.

Je suis une sorte de soupçonner la réponse est non... mais peut-être quelqu'un a un piratage intelligent?

Tout conseil serait grandement apprécié.

Answer 1

Vous pouvez utiliser le sélecteur d'attribut, input[name="Go"] { } . Sachez qu'il n'est pas pris en charge dans IE6 et qu'il existe plusieurs bogues dans différents navigateurs.

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

Answer 2

Exemple de saisie de texte

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

Answer 3

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 en javascript. Vérifiez Selectivizr

Plus en détail dans 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 }
 

Answer 4

Si je comprends bien votre question alors,

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

par exemple

si identifiant disponible, vous pouvez contrôler 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 contrôler 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');
 

Answer 5

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

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