            Coding With Fun

Home Docker Django Node.js Articles Python pip guide FAQ Policy

CSS property selector

May 03, 2021 CSS

Table of contents

1. CSS Property Selector

2. HTML element styles with specific properties

3. Property selector

4. Property and value selectors

5. Selector for properties and values - Multi-value

6.. The form style

8.. Related articles

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