Hi, in today's post I'm ganna teach you selecting HTML elements by their attribute types. Most CSS beginners stuck with just using element name or class value or id value but don't learn other ways to select the element. Knowing different ways of selecting HTML elements make you better CSS developer. I provide simple code examples but I encourage you to make changes to my code and use them in your projects for deeper understanding.
1. [attribute="value"]
This attribute selector let us select the element when the element has exactly specified attribute and value pair. It does not work if there are empty space or other values in the attribute
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
input[type="text"]{
padding: 8px 5px;
border: 2px solid #333;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0, .2);
}
</style>
</head>
<body>
<input type="text" placeholder="Enter value">
</body>
</html>
2. [attribute*="value"]
This attribute selector selects the element when the element has specified value. This attribute selects the element even if there are other values in the attribute but as long as specified value exist, it works fine.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
[class*="input"]{
padding: 8px 5px;
border: 2px solid #333;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0, .2);
color: purple;
}
</style>
</head>
<body>
<input class="input text-input" type="text" placeholder="Enter value">
</body>
</html>
3. [attribute^="value"]
This attribute selector selects the element when it's only and only the first attribute value. It does not work even if there's a whitespace or other value before it
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
[class^="input"]{
padding: 8px 5px;
border: 2px solid #333;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0, .2);
color: purple;
}
</style>
</head>
<body>
<input class="input text-input" type="text" placeholder="Enter value">
</body>
</html>
4. [attribute&="value"]
This attribute selector selects the element when only and only it's the last attribute value. It does not work even if there's a whitespace or other value after it
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
[class$="text-input"]{
padding: 8px 5px;
border: 2px solid #333;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0, .2);
color: purple;
}
</style>
</head>
<body>
<input class="input text-input" type="text" placeholder="Enter value">
</body>
</html>
5. [attribute~="value"]
This attribute selector selects the element when the attribute value is space separated from the other attribute values. It works as long space separates that value from other values
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
[class~="text-input"]{
padding: 8px 5px;
border: 2px solid #333;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0, .2);
color: purple;
}
</style>
</head>
<body>
<input class="input text-input" type="text" placeholder="Enter value">
</body>
</html>
6. [attribute*="value" i]
The i flag in the brackets makes the attribute value case-insensitive which means that regardless of the case of the attribute value, it selects the element as long as the given value exists. The i flag works in any of the attribute selectors taught in this post.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
[class~="text-input" i]{
padding: 8px 5px;
border: 2px solid #333;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0, .2);
color: purple;
}
</style>
</head>
<body>
<input class="input TEXT-INPUT" type="text" placeholder="Enter value">
</body>
</html>
7. [attribute*="value"][attribute^="value"][attribute&="value"]
Just like we can select the element by combining it's id, class and it's type, we can combine as many attribute selectors as we need to select the element
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
[class~="text-input" i][type="text"][placeholder*="Enter value" i]{
padding: 8px 5px;
border: 2px solid #333;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0, .2);
color: purple;
}
</style>
</head>
<body>
<input class="input TEXT-INPUT" type="text" placeholder="Enter value">
</body>
</html>
Top comments (0)