Can I apply a CSS style to an element name

Question

I m currently working on a project where I have no control over the HTML that I am applying CSS styles to  And the HTML is not very well labelled  in the sense that there are not enough id and class declarations to differentiate between elements   So  I m looking for ways I can apply styles to objects that don t have an id or class attribute   Sometimes  form items have a  name  or  value  attribute    lt input type  submit  value  Go  name  goButton  gt    Is there a way I can apply a style based on name  goButton   What about  value    It s the kind of thing that s hard to find out because a Google search will find all sorts of instances in which broad terms like  name  and  value  will appear in web pages   I m kind of suspecting the answer is no    but perhaps someone has a clever hack   Any advice would be greatly appreciated

User · Answer

This is the perfect job for the query selector...

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

You can then loop through these collections to operate on elements found.

User · Answer

You can use attribute selectors but they won t work in IE6 like meder said  there are javascript workarounds to that tho  Check Selectivizr  More detailed into on attribute selectors  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

User · Answer

If i understand your question right then   Yes you can set style of individual element if its id or name is available   e g    if id available then u can get control over the element like    lt input type  submit  value  Go  name  goButton  gt   var v obj   document getElementsById  goButton     v obj setAttribute  style   color red background none      else if name is available then u can get control over the element like    lt input type  submit  value  Go  name  goButton  gt   var v obj   document getElementsByName  goButton     v obj setAttribute  style   color red background none

User · Answer

Using  name elementName    without tag before will work too  It will  affect all elements with this name   For example    x000D   x000D   name test    x000D    width  100px  x000D    x000D   lt input type text name test gt  x000D   lt div name test gt  lt  div gt  x000D   x000D   x000D

User · Answer

You can use the attribute selector     x000D   x000D  input name  goButton     x000D    background  red  x000D    x000D   lt input name  goButton  gt  x000D   x000D   x000D    Be aware that it isn t supported in IE6   Update  In 2016 you can pretty much use them as you want  since IE6 is dead  http   quirksmode org css selectors   http   reference sitepoint com css attributeselector

User · Answer

if in case you are not using name in input but other element  then you can target other element with there attribute    x000D   x000D       title  flower    x000D        border  5px solid yellow  x000D        x000D       lt img src  klematis jpg  title  klematis flower  width  150  height  113  gt  x000D       lt img src  img flwr gif  title  flower  width  224  height  162  gt  x000D       lt img src  img flwr gif  title  flowers  width  224  height  162  gt  x000D   x000D   x000D    hope its help  Thank you

User · Answer

For future googlers  FYI  the method in the answer by  meder   can be used with any element that has a name attribute  so lets say theres an  lt iframe gt  with the name xyz then you can use the rule as belows   iframe name xyz            display  none         The name attribute can be used on the following elements     lt button gt   lt fieldset gt    lt form gt    lt iframe gt    lt input gt    lt keygen gt    lt map gt    lt meta gt   lt object gt   lt output gt   lt param gt   lt select gt   lt textarea gt

User · Answer

x000D   x000D  input type text      width  150px    length  150px     input name myname      width  100px  length  150px    x000D   lt input type  text  gt   lt br gt   lt input type  text  name  myname  gt  x000D   x000D   x000D

User · Answer

Text Input Example   x000D   x000D  input type text    x000D    width  150px  x000D    x000D   x000D  input name myname    x000D    width  100px  x000D    x000D   lt input type  text  gt  x000D   lt br gt  x000D   lt input type  text  name  myname  gt  x000D   x000D   x000D

User · Answer

have you explored the possibility of using jQuery   It has a very reach selector model  similar in syntax to CSS  and even if your elements don t have IDs  you should be able to select them using parent --  child --  grandchild relationship   Once you have them selected  there s a very simple method call  I forget the exact name  that allows you to apply CSS style to the element s    It should be simple to use and as a bonus  you ll most likely be very cross-platform compatible

[html] Can I apply a CSS style to an element name?

Examples related to html

Examples related to css

Examples related to css-selectors