WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

CSS Attribute Selectors


Style HTML Elements With Specific Attributes

It is conceivable to style HTML components that have explicit properties or characteristic values.


CSS [attribute] Selector

The [attribute] selector is utilized to choose components with a predetermined attribute.

The following model chooses all <a> components with an objective attribute:

Example

a[target] {
    foundation shading: #d4efc9;
}
Try it yourself »

CSS [attribute="value"] Selector

The [attribute="value"] selector is utilized to choose components with a predetermined property and value.

The following model chooses all <a> components with a target="_blank" attribute:

Example

a[target="_blank"] {
    foundation shading: #d4efc9;
}
Try it yourself »

CSS [attribute~="value"] Selector

The [attribute~="value"] selector is utilized to choose components with a property esteem containing a predetermined word.

The following model chooses all components with a title characteristic that contains a space-isolated rundown of words, one of which is "flower":

Example

[title~="flower"] {
    fringe: 5px strong #d4efc9;
}
Try it yourself »

The model above will coordinate components with title="flower", title="summer bloom", and title="flower new", yet not title="my-blossom" or title="flowers".


CSS [attribute|="value"] Selector

The [attribute|="value"] selector is utilized to choose components with the predetermined characteristic beginning with the predefined value.

The following model chooses all components with a class characteristic esteem that starts with "top":

Note: The esteem must be an entire word, either alone, as class="top", or pursued by a hyphen( - ), like class="top-text"! 

Example

[class|="top"] {
    foundation: #d4efc9;
}
Try it yourself »

CSS [attribute^="value"] Selector

The [attribute^="value"] selector is utilized to choose components whose quality esteem starts with a predetermined value.

The following model chooses all components with a class property estimation that starts with "top":

Note: The esteem does not need to be an entire word! 

Example

[class^="top"] {
    foundation: #d4efc9;
}
Try it yourself »

CSS [attribute$="value"] Selector

The [attribute$="value"] selector is utilized to choose components whose property esteem closes with a predetermined value.

The following precedent chooses all components with a class quality esteem that closes with "test":

Note: The esteem does not need to be an entire word!  

Example

[class$="test"] {
    foundation: #d4efc9;
}
Try it yourself »

CSS [attribute*="value"] Selector

The [attribute*="value"] selector is utilized to choose components whose property esteem contains a predefined value.

The following precedent chooses all components with a class trait esteem that contains "te":

Note: The esteem does not need to be an entire word!  

Example

[class*="te"] {
    foundation: #d4efc9;
}
Try it yourself »

Styling Forms

The trait selectors can be valuable for styling frames without class or ID:

Example

input[type="text"] {
    width: 150px;
    show: block;
    edge base: 10px;
    foundation shading: #d4efc9;
}

input[type="button"] {
    width: 120px;
    edge left: 35px;
    show: block;
}
Try it yourself »