CSS property selector


HTML element styles with specific attributes

HTML element styles with specific attributes are not just class and id.

Note: IE7 and IE8 need to declare!DOCTYPE to support attribute selectors! IE6 and lower versions do not support attribute selectors.

Attribute Selector

The following example turns all elements containing the title blue:

Example

<!DOCTYPE html>
<html>
<head>
<style>
[title]
{
color:blue;
}
</style>
</head>

<body>
<h2>Will apply to:</h2>
<h1 title="Hello world">Hello world</h1>
<a title="php中文网" href="http://www.php.cn">php中文网</a>
<hr>
<h2>Will not apply to:</h2>
<p>Hello!</p>
</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

Attribute and value selector

The following example changes the border style of the title title='php Chinese website' element:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>  
<style>
[title=phpzww]
{
	border:5px solid green;
}
</style>
</head>

<body>
<h2>将适用:</h2>
<img title="php中文网" src="https://img.php.cn/upload/course/000/000/015/5c64ff4f37698935.png" width="270" height="80" />
<br>
<a title="php中文网" href="http://www.php.cn">php中文网</a>
<hr>
<h2>将不适用:</h2>
<p title="greeting">Hi!</p>
<a class="phpzww" href="http://www.php.cn">php中文网</a>
</body>
</html>

Run Example»

Click the "Run Instance" button to view the online instance

Selector for attributes and values ​​- multi-value

The following is the title attribute containing the specified value Examples of element styles, using (~) to separate attributes and values:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>  
<style>
[title~=hello]
{
	color:blue;
} 
</style>
</head>

<body>
<h2>将适用:</h2>
<h1 title="hello world">Hello world</h1>
<p title="student hello">Hello CSS students!</p>
<hr>
<h2>将不适用:</h2>
<p title="student">Hi CSS students!</p>
</body>
</html>

Run Example»

Click the "Run Example" button to view an online example

The following is an example of an element style containing a lang attribute with a specified value, using (|) to separate the attribute and value:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>  
<style>
[lang|=en]
{
	color:blue;
}
</style>
</head>

<body>
<h2>将适用:</h2>
<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>
<p lang="en-gb">Ello!</p>
<hr>
<h2>将不适用:</h2>
<p lang="us">Hi!</p>
<p lang="no">Hei!</p>
</body>
</html>

Run instance»

Click the "Run instance" button to view the online instance

Form style

Attribute selector style does not need to use the form of class or id:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>  
<style>
input[type="text"]
{
	width:150px;
	display:block;
	margin-bottom:10px;
	background-color:yellow;
}
input[type="button"]
{
	width:120px;
	margin-left:35px;
	display:block;
}
</style>
</head>
<body>

<form name="input" action="demo-form.php" method="get">
用户名:<input type="text" name="name" value="Peter" size="20">
密码:<input type="text" name="password" value="123456" size="20">
<input type="button" value="按钮">

</form>
</body>
</html>

Running example»

Click the "Run Instance" button to view the online instance