attribute Selector

attribute Selector

CSS attribute Selector reference

The CSS attribute selectors are used to target and style elements according to the HTML attributes and attribute values they have. We will show a code example for each attribute selector syntax type.
X[attribute] - style elements that have a specific attribute.

CSS CODE EXAMPLE

<!DOCTYPE html>
<style type="text/css">
p[title] { color:#F0F; font-weight:bold; }
div[lang] { color:#090; font-weight:bold; }
</style>
<p title="My Title">content...</p>
<p id="p1">content...</p>
<div lang="en">content...</div>

content...

X[attribute="value"] - style elements that have a specific attribute and value.

CSS CODE EXAMPLE

<!DOCTYPE html>
<style type="text/css">
div[dir="rtl"] { background:#FFEBAE; }
</style>
<div dir="rtl">content...</div>
<div dir="ltr">content...</div>

content...

X[attribute~="value"] - style elements that have a specific attribute and one of its space separated listed values is a match.

CSS CODE EXAMPLE

<!DOCTYPE html>
<style type="text/css">
div[for~="bob"] { background:#FFEBAE; }
</style>
<div for="sara bob john">content...</div>
<div for="allen judy greg">content...</div>

content...

X[attribute^="substring"] - style elements that have a specific attribute and its value is a front substring match.

CSS CODE EXAMPLE

<!DOCTYPE html>
<style type="text/css">
div[id^="mn"] { background:#FFEBAE; }
</style>
<div id="abcd">content...</div>
<div id="mnop">content...</div>
<div id="wxyz">content...</div>

content...

X[attribute$="substring"] - style elements that have a specific attribute and its value is a back substring match.

CSS CODE EXAMPLE

<!DOCTYPE html>
<style type="text/css">
div[id$="yz"] { background:#FFEBAE; }
</style>
<div id="abcd">content...</div>
<div id="mnop">content...</div>
<div id="wxyz">content...</div>

content...

X[attribute*="substring"] - style elements that have a specific attribute and its value is a substring match anywhere.

CSS CODE EXAMPLE

<!DOCTYPE html>
<style type="text/css">
div[id*="bc"] { background:#FFEBAE; }
</style>
<div id="abcd">content...</div>
<div id="mnop">content...</div>
<div id="wxyz">content...</div>

content...

X[attribute|="value"] - style elements that have a specific attribute and its value is a hyphen separated list where the first value is a match.

CSS CODE EXAMPLE

<!DOCTYPE html>
<style type="text/css">
div[for|="w"] { background:#FFEBAE; }
</style>
<div for="a-b-c-d">content...</div>
<div for="w-x-y-z">content...</div>

content...

click here to code.

attribute Selector

0 Response to "attribute Selector"

Post a Comment