While
I was redesigning my website, I have been working a lot with CSS and this make me discover some selectors I was knowing in CSS.
Let's start with an example
To better understand what selectors are used to, let's start with a simple HTML page, like for instance :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Page for CSS selectors</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div>
<input type="text" id="InputId" /><br />
<input type="text" id="Prefix_InputId" /><br />
<input type="text" id="InputId_Suffix" /><br />
<input type="text" id="Prefix_InputId_Suffix" /><br />
<input type="text" id="someOtherId" title="I have a title" /><br />
</div>
</body>
</html>
This HTML page reference a basic CSS file: "style.css".
Let's now modify this file to see how this is modifying the output.
Selector testing :
input
{
background-color: Aqua;
}
|
 |
Apply to all Input elements |
input[id="InputId"]
{
background-color: Red;
}
|
 |
Apply to all Input elements, having the id attribute equal to "InputId" |
input[title]
{
background-color: Green;
}
|
 |
Apply to all Input elements, having the an attribute "title" |
input[id^="InputId"]
{
background-color: Gray;
}
|
 |
Apply to all Input elements, having the id attribute starting with "InputId" |
input[id$="InputId"]
{
background-color: Fuchsia;
}
|
 |
Apply to all Input elements, having the id attribute ending with "InputId" |
input[id*="InputId"]
{
background-color: Silver;
}
|
 |
Apply to all Input elements, having the id attribute containing "InputId" |
As you can see, in many case, the syntax is inspired by the regex standard notation. There are some more selectors, but those ones shall already allow you to catch any of your HTML elements and so will give you the opportunity to apply your CSS styles.