Style HTML Elements With Specific Attributes

[Bigga Lexx]

I am doing HTML from last three months. I have done many things in HTML. I have created many forms for different purpose. But I am not cleared in the Style HTML Elements With Specific Attributes.! There are many doubts in my mind about it. The main thing I want to know, is it possible to style HTML elements that have specific attributes..?? Also every browser supports the !DOCTYPE.?? Please help me to solve my query as soon as possible.

[Katty]

You can use the Style HTML Elements With Specific Attributes. Also it is possible to style HTML elements that have specific attributes, not just class and id. HTML is the predominant markup language for web pages. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists etc as well as for links, quotes, and other items. If you want to change the way the generated HTML output looks, you can do that with a Cascading Style Sheet (CSS), which modern browsers support. You use a text editor to create a separate CSS stylesheet file that contains all the style information, and then associate that stylesheet with all of your HTML files.

[absolute55]

You have asked that if !DOCTYPE is supported by every browser. The answer for this is that if you are having Internet Explorer 7 or higher version then it will supports attribute selectors only if a !DOCTYPE is specified. Attribute selection is NOT supported in IE6 and lower. I have provided you with an example of the styles all elements with a title attribute. Here is sample of coding for that :

[title]
{
color:yellow;
}

[Zecho]

You can also list all the HTML Elements inside a DIV with specific attributes. The following coding will output list of a tags inside the div2.

function getElementsByAttr(attr, value, parent)
{
  var collection = parent.getElementsByTagName('#'),
    list = [];
  for (var i = 0, len = collection.length, curr; i < len; i++)
  {
    curr = collection[i];
    if (typeof curr[attr] != 'unknown' && curr[attr] === value)
    {
          list.push(curr);
    }
  }
  return list;

}

window.onload = function(){
  var list = getElementsByAttr('tata', 'tab3', document.getElementById
('div2'));

[MindSpace]

You write your css stylesheet to associate CSS styles with specific combination of HTML element names. The following example mentioned below styles all elements with title="Welcome". Here is the coding for the same :

[title=Welcome]
{
border:7px solid red;
}

[Modifier]

I think that you should have known that you can use the Style HTML Elements With Specific Attributes. You use a text editor to create a separate CSS stylesheet file that contains all the style information, and then associate that stylesheet with all of your HTML files. The The attribute selectors are particularly useful for styling forms without class or ID :

input[type="text"]
{
width:200px;
display:block;
margin-bottom:12px;
background-color:blue;
}
input[type="button"]
{
width:150px;
margin-left:30px;
display:block;
}