Try It Yourself: CSS Attribute Selectors

HTML Code

<!DOCTYPE html>
<html>
<head>
  <title>CSS Attribute Selectors</title>
  <meta charset="UTF-8">
</head>
<body>

<h1>CSS Attribute Selectors</h1>

<ul>
  <li><a href="#">List item</a></li>
  <li><a href="#">List item</a></li>
  <li><a href="#" target="_blank">List item</a></li>
  <li><a href="#" title="design">List item</a></li>
</ul>
<style>
a[target="_blank"] { 
  font-weight: bold;
  color: #333;
}
[title~="design"] {
  font-weight: bold;
  color: #f00;
}
</style>

<div class="box-shadow">
  <input type="text" name="username" placeholder="Enter your name">
  <input type="submit" name="submit">
</div>

<style>
[class*="do"]{
  width: 50%;
  margin: auto;
  padding: 10px;
  border: 1px solid #f7f7f7;
  box-shadow: 3px 3px 5px #333;
}  
input[placeholder="Enter your name"]{
  width: 100%;
  padding: 5px 10px;
  box-sizing: border-box;
  margin-bottom: 10px;
  border: 1px solid #ccc;
}
input[type="submit"] {
  background: #096;
  border: 1px solid #096;
  color: #fff;
  padding: 5px 15px;
  cursor: pointer;
}
</style>

</body>
</html>

CSS Code

/* Write your CSS here */

CSS Attribute Selectors - Playground