Attribute selectors and flexible style sheet!

It – Hardware & Software | Alec Oliveira | 2 views

Use attribute selectors to style sheet description easier

How you specify the decoration target style sheet format called “attribute selectors”. Until now, is not compatible with Firefox or Opera, but was now even Internet Explorer 7. Attribute selector easy targeting of decoration in the style sheet. For example, given the following is possible.

decorated with only a name attribute of the a element,
elements of a decoration only the _blank target attribute value,
input elements decoration button only the value of the type attribute,

Thus, “only exist in certain attributes” and allows specifying the string value of an attribute is specified only if limited. Style sheets can specify the value of the attribute, so more flexible, less amount of descriptive.

Just the button was in the above example, to demonstrate the characteristic, is decorated with mixing “check box” or “field” form.

“Button” nor “TextBox” “check box” all make the input elements in the form. Buttons, textboxes to is determined by only the value of the type attribute.

Button input field also all input elements is created.

So when will changes to the decor of any form, and to apply the style to the input element, including the check box also textboxes and buttons. Then, for example cannot realize that “only the button decorations and want to” or “want to” change the color only the check box”.
Attaching to the class attribute tags you want decorative subject separately , decoration for its class, but did not.

However, with how to write the attribute selectors”that easily, with only the button for” decoration”becomes like can make ( as well edit the HTML.

This time I want to introduce how to write the attribute selector, and how decoration form effortlessly using the attribute selector”as examples of utilization.

Detailed usage of the attribute selector, >>

How to use attribute selectors… The ago

It usually describes the style sheet format such as the following.

Element {property: value;}

Properties that describe the trailing semicolon is a ‘delimiter’, so is optional if only one.
For example, font color for headings h1 elements to red to…

H1 {color: red;}

… And write it. If you put this style like HTML is adorned.

characters in the h1 element is embellished in the red.
… I have no problem so far. Is the basis of the basic style sheet.

How to use attribute selectors

How to write like the following using the format “attribute selectors” that can.

Element name, attribute name {property: value;}
The “value attribute = element name” {property: value;}

Immediately after the element name in the brackets [] can write and the attributes.

Only ) ( attribute name for the attribute selector example 1

Feels like: can be written to specify the attribute name only.

a [name] {background-color: #ffcccc;}

This is given to only the name attribute of the a element, the background color pale red ( #ffcccc ) . The following HTML is adorned.

< a name = “apple” > here is a decoration for </a>
> < a href = “a.html” here is the non-target </a>
> < a name = “orange” also here decorations for </a>
> < a href = “b.html” here is the non-target </a>

Only the a element’s name attribute is specified, the above will be decorated. Looks like the following to display the actual.

Left-to-IE7, Firefox2, IE6 ( all rendered in standards mode )

Because IE6 is not support the attribute selector, not decorated nothing.

Use example 2 for attribute selector (also value you specify)

Limit, as well as attribute name specified in the attribute value is also written:

a [target = "_blank"] {font-style: italic;}

To display in italics only one value _blank is specified in the target attribute out of a element above,… Will it be.
specify the value _blank target attribute for the a element then becomes a link to open links in a separate window. This means that decorated the italicized link opens a separate window only.
For example, if the HTML like:…

< a href = “a.html” target = “_top” > This is non </a>
“b.html < a href =” target = “_blank” > it’s a target! </a>

First a element (link) are excluded, so the second a element consistent with the conditions will be adorned. Looks like the following to display the actual.

Left-to-IE7, Firefox2, IE6 ( all rendered in standards mode )

Examples and notes

In the following pages we introduce as sample can effectively utilize the attribute selector, cushy decor how to input form.
Also, because includes a note on using the attribute selector, please see. ( forget this note, attribute selectors are not enabled in IE7. )

So what’s >> notes and examples of attribute selectors

Examples of attribute selectors: decoration of the input form

Now, like the following to create input forms HTML consider when.

<form>
Name: < input type = “text” name = “name” size = “12″ >< br >
Age: < input type = “text” name = “age” size = “3″ >< br >
< input type = “radio” name = “mf” value = “m > man
< input type = “radio” name = “mf” value = “f” > woman <br>
< input type = “submit” value = “submit! “>
</form>

This view, looks like.

Left: IE7, right : Firefox2 ( with WindowsXP on )

You want to decorate only the border of the TextBox here,.
Without using the attribute selector applies to all of the input elements, describing the style sheets the following…

input {1 px dashed red;}

Looks like the following.
These styles is a given to border (border) to red (red) line color dashed lines (dashed), stroke 1px thickness

Left: IE7, right-click : Firefox2 borders until it decoration.

For input elements all in even non-text input fields, such as button would be decorative.
This won’t do it.
Keep added a decent without using the attribute selector to resolve this issue, just the elements you want to decorate the class name, and specify decoration for its class. This is because it not only style sheet, and to edit the HTML.

However, using attribute selectors, only have to write the following, can only textboxes for decoration.

[type = input "text] {1 px solid red;}

Write the above be decorated only “one”text of the input elements in type attribute value”target.
To apply the style sheet looks like.

Left: IE7, right : Firefox2 ( both in “standard mode” when drawing )

Input elements other than the text input field is non decorative. ( not decorated buttons and radio buttons, only the TextBox decorated. )
Using attribute selectors, comfortably you can write style like this.

Notes on using the attribute selector

When Internet Explorer 7 even blending modes is “compatibility mode” selector attributes will be ignored. Drawing mode be “standard mode” is ) ( features supported by IE7 that contains attribute selector not enabled. Write HTML so always rendered in “standards mode”, so write a DOCTYPE = Please note that point should be.
About the DOCTYPE declaration articles please refer to as the DOCTYPE declaration is not display old IE7 even.

Left: IE7 (standard mode), right : IE7 (compatibility mode)
Is in compatibility mode, as IE6 before display.

Description using an attribute selector is ignored by Internet Explorer 6 and below. ( is specified is ignored completely will display are not. So, “but not required desirable decoration” for feel free to leverage. )

The end

This time was introduction to usage of “attribute selectors supported from Internet Explorer 7″.
Even Firefox, Opera, and Safari is available, please try use.

Still, Internet Explorer 6 will most often share in the browser in the world. Is it from a share of Internet Explorer 7 will increase from now on, you know the attribute selector usage from the now out of useful may.

When you take advantage of the kindest bring DOCTYPE declaration statements!

Incoming search terms:

attribute button decoration (1)