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:
<input type="submit" value="Go" name="goButton">
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.
You can use the attribute selector,
Text Input Example
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/
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
<iframe>
with the namexyz
then you can use the rule as belows.The
name
attribute can be used on the following elements:<button>
<fieldset>
<form>
<iframe>
<input>
<keygen>
<map>
<meta>
<object>
<output>
<param>
<select>
<textarea>
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,
else if name is available then u can get control over the element like,
Using
[name=elementName]{}
without tag before will work too. It will affect all elements with this name.For example:
This is the perfect job for the query selector...
You can then loop through these collections to operate on elements found.
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.
Similar questions
Recent questions
Licensed under cc by-sa 3.0 with attribution required.