Posts in current category

CSS property selector


May 03, 2021 23:00 CSS


Table of contents


CSS Property Selector

As the name implies, a CSS property selector means that an element can be selected based on its properties and property values.


HTML element styles with specific properties

HTML element styles with specific properties are more than just class and id.

Note: I E7 and IE8 need to declare! D OCTYPE supports property selectors! Property selectors are not supported for IE6 and earlier versions.


Property selector

The following example is to turn all elements containing the title blue:

[title]
{ color:blue; }

Try it out . . .


Property and value selectors

The following example title='w3cschool' element:

[title=w3cschool]
{ border:5px solid green; }

Try it out . . .


Selector for properties and values - Multi-value

The following is an example of an element title the title property that specifies a value, ~ property and the value with ( . . . .

[title~=hello] { color:blue; }

Try it out . . .

The following is an example of an lang that contains the lang property of a specified | Separate properties and values:

[lang|=en] { color:blue; }

Try it out . . .


The form style

Property selector styles do not need to be in the form of class or id:

input[type="text"]
{ width:150px;
display:block;
margin-bottom:10px;
background-color:yellow; }
input[type="button"]
{ width:120px;
margin-left:35px;
display:block; }

Try it out . . .

Related articles

CSS Reference Manual: CSS (attribute| .value) selector