CSS3 Quick Tip – Attribute Selector and Regex

Using Attribue Selector, you can set the styling based on the attributes.

E.g. 1 – Using Attribute Selector

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Welcome to HTML5 Tuts!</title>
<link rel="stylesheet" href="main.css">
</head>

<body>
<div id="theparent">
<p name="child">This is a sentence.</p>
<p name="child">This is a sentence.</p>
<p name="childname">This is a sentence.</p>
<p name="child">This is a sentence.</p>
<p name="child">This is a sentence.</p>
</div>
</body>
</html>

Main.css

p[name="childname"] {color:blue;}

Screenshot of E.g. 1:

E.g. 2 – Using Regex in CSS

 <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Welcome to HTML5 Tuts!</title>
<link rel="stylesheet" href="main.css">
</head>

<body>
<div id="theparent">
<p name="children">This is a sentence.</p>
<p name="thechild">This is a sentence.</p>
<p name="mychildname">This is a sentence.</p>
</div>
</body>
</html>

Main.css

 p[name^="child"] {color:blue;}    // beginning with
p[name$="child"] {color:blue;}    // ending with
p[name*="child"] {color:blue;}    // wildcard, as long as "child" is found

Screenshot of E.g. 2: p[name^="child"] {color:blue;}