Attribute Selectors

Various tag attributes can be used to select elements to apply CSS to. These are especially useful with <input> elements in a <form>.

[attribute]

[readonly] 
{
   /* Selects all elements with a 'readonly' attribute */
}

Example of an attribute selector (Run Example)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Attribute Selector Example</title>
<style>
[readonly]
{
   background-color:red;
}
</style>
</head>

<body>
<form>
<label for="name">Name:</label>
<input type = "text" id="name"><br>
<label for="age">Age:</label>
<input type = "number" id="age"><br>
<label for="college">College</label>
<input type = "text" id="college" value = "dkit" readonly>
</form>
</body>
</html>

[attribute = value] (attribute 'equals' selector)

[type = text]
{
   /* Selects all elements with an input='text' attribute */
}

Example of an attribute 'equals' selector (Run Example)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Attribute Equals Selector Example</title>
<style>
[type = text]
{
   background-color:red;
}
</style>
</head>

<body>
<form>
<label for="name">Name:</label>
<input type = "text" id="name"><br>
<label for="age">Age:</label>
<input type = "number" id="age"><br>
<label for="college">College:</label>
<input type = "text" id="college" value = "dkit" readonly>
</form>
</body>
</html>

[attribute |= value] (attribute 'language subcode' selector)

[lang |= EN]
{
   /* Selects all elements with a lang attribute value that equals "EN" */
   /* or begins with “EN” and is immediately followed by “-”. */
   /* This is useful for language subcode matches. For example: */ 
   /* English for UK       en-GB */
   /* English for Ireland  en-IE */
   / *English for the US   en-US */

}

Example of an attribute 'language subcode' selector (Run Example)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Attribute Language Subcode Selector Example</title>
<style>

[lang |= en]
{
   background-color:red;
   font-family: "Times New Roman", serif;
}


[lang |= zh] 
{
  font-family:  黑体, 微软雅黑, 宋体, arial, sans-serif;
}


</style>
</head>

<body>
<p lang="en">English without a subcode. Welcome</p>
<p lang="en-us">US. Welcome</p>
<p lang="en-uk">UK. Welcome</p>
<p lang="en-ie">Ireland. Welcome</p>
<p lang="zh-hans">Mandarin Chinese. 欢迎</p>

</body>
</html>

[attribute ~= value] (attribute 'contains exact word' selector)

[title ~= dundalk]
{
   /* Selects all elements with a title attribute containing the exact word "dundalk" */
   /* NOTE: Non-exact matches, such as Dundalk, will not be selected */
}

Example of an attribute 'contains exact word' selector (Run Example)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Attribute Contains Word Whole Selector Example</title>
<style>
[title ~= DkIT]
{
   background-color:red;
}
</style>
</head>

<body>
<a href="https://www.dkit.ie/computing-mathematics" title = 'DkIT Computing' target="_blank">DkIT Computing</a>
<a href="http://www.dcu.ie/computing/index.shtml" title = 'DCU Computing'  target="_blank">DCU Computing</a>
<a href="https://www.maynoothuniversity.ie/computer-science" title = 'Maynooth Computing' target="_blank">Maynooth Computing</a>
<a href="https://www.dkit.ie/business-humanities/business-studies" title = 'DkIT Business' target="_blank">DkIT Business</a>
<a href="http://www.dcu.ie/dcubs/index.shtml" title = 'DCU Business  target="_blank">DCU Business</a>
<a href="https://www.maynoothuniversity.ie/school-business" title = 'Maynooth Business target="_blank">Maynooth Business</a>
</body>
</html>

The ~= (attribute contains exact word) selector will only select exact matches of words in a sentence. It is also case sensitive.

Change the [title ~= DkIT] to lowercase [title ~= dkit]. Why does it not work?

Write code to try to use [href ~= 'dkit'] as the attribute exact match in the example ablove. Why does it not work?

[attribute *= value] (attribute 'contains' selector)

a[href *= DkIT]
{
   /* Selects every <a> element whose href attribute value contains the substring "Dundalk" */
   /* It does not have to be an exact match, but it does have to match case. */
}

Example of an attribute 'contains' selector (Run Example)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Attribute Contains Word Selector Example</title>
<style>
[title *= Computing]
{
   background-color:red;
}
</style>
</head>

<body>
<a href="https://www.dkit.ie/computing-mathematics" title = 'DkIT Computing' target="_blank">DkIT Computing</a>
<a href="http://www.dcu.ie/computing/index.shtml" title = 'DCU Computing'  target="_blank">DCU Computing</a>
<a href="https://www.maynoothuniversity.ie/computer-science" title = 'Maynooth Computing' target="_blank">Maynooth Computing</a>
<a href="https://www.dkit.ie/business-humanities/business-studies" title = 'DkIT Business' target="_blank">DkIT Business</a>
<a href="http://www.dcu.ie/dcubs/index.shtml" title = 'DCU Business'  target="_blank">DCU Business</a>
<a href="https://www.maynoothuniversity.ie/school-business" title = 'Maynooth Business' target="_blank">Maynooth Business</a>
</body>
</html>

[attribute ^= value] (attribute 'starts with' selector)

a[href ^= "https"]
{
   /* Selects every <a> element whose href attribute value begins with "https" */
   /* Note that the value does not have to be a whole word */
}

Example of an attribute 'starts with' selector (Run Example)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Attribute Starts with String Selector Example</title>
<style>
[href ^= https]
{
   background-color:green;
}
</style>
</head>

<body>
<a href="https://www.dkit.ie/computing-mathematics" title = 'DkIT Computing' target="_blank">DkIT Computing</a>
<a href="http://www.dcu.ie/computing/index.shtml" title = 'DCU Computing'  target="_blank">DCU Computing</a>
<a href="https://www.maynoothuniversity.ie/computer-science" title = 'Maynooth Computing' target="_blank">Maynooth Computing</a>
<a href="https://www.dkit.ie/business-humanities/business-studies" title = 'DkIT Business' target="_blank">DkIT Business</a>
<a href="http://www.dcu.ie/dcubs/index.shtml" title = 'DCU Business  target="_blank">DCU Business</a>
<a href="https://www.maynoothuniversity.ie/school-business" title = 'Maynooth Business target="_blank">Maynooth Business</a>
</body>
</html>

[attribute $= value] (attribute 'ends with' selector)

a[href $= ".ie"]
{
   /* Selects every <a> element whose href attribute value ends with ".ie" */
}

Example of an attribute 'ends with' selector (Run Example)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Attribute Ends with Substring Selector Example</title>
<style>
[href $= ie]
{
   background-color:green;
}
</style>
</head>

<body>
<a href='www.dkit.ie' target='_blank'>DkIT</a>
<a href='www.google.com' target='_blank'>Google</a>
<a href='www.google.ie' target='_blank'>Google.ie</a>
<a href='www.microsoft.com' target='_blank'>Microsoft</a>
</body>
</html>