CSS Attribute Selectors; An overview.
Attribute selectors can be useful when the only difference between your targeted elements are their attributes or attribute values. Instead of introducing ids and classes, one can simply target elements by their different attributes or attribute values. Here, a straightforward example using a login form code would do:
<body>
<div class="wrapper">
<div class="card">
<form>
<label for="email">Email</label>
<input type="email" placeholder="Email">
<label for="password">Password</label>
<input type="passsword" placeholder="Password">
<input type="submit" value="login">
</form>
</div>
</div>
</body>
We see that the HTML document has three input tags. In this case, we utilize the input type "submit" to target a specific input tag without impacting the others.
*{
margin: 0;
padding:0;
box-sizing: border-box;
}
.wrapper {
width: 100%;
height: 100vh;
background-color: peru;
display: flex;
align-items: center;
justify-content: center;
}
.card{
width: 350px;
min-height: 200px;
padding: 30px;
background-color: white;
border-radius: 5px;
}
input{
width: 100%;
height: 35px;
margin: 5px 0px 12px;
padding-left: 10px;
}
input[type="submit"]{
background-color: peru;
border: none;
color: white;
}
An equality sign and the value of the attribute "submit" enclosed in quotation marks are used to target the input type submit. The type attribute, which is enclosed in square brackets and is now a property, is also used. We discover that the input box with the value log in the HTML document bears the specification in the CSS file when the HTML page is refreshed in the browser.
This is particularly helpful; were there are so many input tags in one html file and we want to bypass the arduous task of attaching a class or id to each tag. There are other attribute selectors that could be classified as substring selectors as they match specifically inside the value of the attribute. For instance we could have paragraph tags with title attributes:
<p title="this is a paragraph">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Mollitia repellendus sapiente, repellat quibusdam cumque </p>
<p title="a paragraph">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Mollitia repellendus sapiente, repellat quibusdam cumque </p>
<p title="paragraph">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Mollitia repellendus sapiente, repellat quibusdam cumque </p>
<p title="something">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Mollitia repellendus sapiente, repellat quibusdam cumque </p>
<p title="you know">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Mollitia repellendus sapiente, repellat quibusdam cumque </p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Mollitia repellendus sapiente, repellat quibusdam cumque </p>
We may wish to select only paragraphs with the value of the attribute starting with the word paragraph. The CSS target code would appear thus:
p[title^="paragraph"]{
}
Note the caret symbol before the equality sign; only paragraphs with value starting with the word paragraph would be affected by CSS styling. If we wanted to select paragraphs ending with the word paragraph, the code would appear thus:
p[title$="paragraph"]{
}
Note the dollar sign symbol before the equality sign. Any word or letter could be used in selecting or matching during styling. For instance we want to style only paragraphs with the the letter “o” in the value of their attribute; the code would appear thus:
p[title*="paragraph"]{
}
Observe the asterisk symbol before the equality sign. Obviously CSS attribute selectors are an advanced way of matching or targeting elements for styling in case of similar multiple elements in a document.
Top comments (0)