por CSS, in Spanish “Cascading style sheets” are a vitally important tool for web developers. Despite that, it can be difficult to fully instruct yourself due to the complexity of some of its tools or sections. That is why in this post we will tell you about CSS attributes, what they are and how you can use them when you are designing your websites.
What are they?
CSS attributes are words used within the opening tag, to control the behavior of the element with either HTML or CSS. A very interesting feature of CSS is the ability to apply styles based on the existence or content of certain attributes of HTML elements. It is very similar to how you select classes (in most cases, it is enough for us to use classes instead of selecting by attributes). However, In some cases it can be very powerful since you can select elements Html depending on their attributes and respective values.
In cssthese attributes are surrounded by square brackets [ ] and there are several ways to use them, inspired by a concept called regular expressions:
[href]: If the element has href attribute.[href=»#»]: If the element has href attribute and its value is #.[href*=»manzdev»]: If the element has href attribute and its value contains manzdev.[href^=»https://»]: If the element has an href attribute and its value begins with https://.[href$=».pdf»]: If the element has an href attribute and its value ends with .pdf (a link to a PDF).[class~=»manzdev»]: If the element has class attribute with a list of values and one of them is manzdev.[lang|=»es»]: If the element has a lang attribute with a list of values, where one begins with es-.
Existing attribute
For a start, you can use the attribute [style] to select all tags Html that contain a style attribute to give inline styles to an element. These elements would appear with a red background:
[style] {
background: network;
}
This example is didactic and has no practical design purpose, since the idea would be visually show which elements have that characteristic, something that could catch the interest of a developer. If the element does not have an attribute style defined, styles are not applied to it.
Attribute with exact value
Thanks to the power of CSS attributes, You can indicate the exact value so that they are selected. To do this, you simply use the = and write the text between double quotes:
to[rel=»nofollow»] {
background: network;
}
This example selects links that have an attribute rel established to nofollow. This is a feature that tells Google (or other robots) that this link should not be taken into account to be followed, something that can be very useful to discourage SPAM in the comments, for example.
Attribute contains text
Instead of a specific value, also can you indicate the text fragment that should be includedbut it is not the full text, with several possible coincidences:
to[href*=»manz»] {
background-color: orange;
}
In the same way, there is a variant that uses the comparator ~=. This variant would allow you select the elements Html that have an attribute with a list of words separated by spaces, where one of them is the text that you have previously written. This is a more restrictive version of the comparator *=.
Start/end of CSS attributes
Another resource that is very useful is the possibility of select elements depending on the text it starts with or with the one that ends in the value of a specific attribute. This is an example, where this functionality can be appreciated much better:
to[href]::before {
content: url(icon_url.png);
padding-right: 3px;
}
to[href$=».pdf»]::before {
content: url(icon_pdf.png);
}
to[href]::despues de {
content: «: » attr(href);
display: inline-block;
color: #666;
}
You can get the following result:
The first block css will show an icon (icon_url.png) before (::before) of any link with the attribute href.In the second block css overrides the previous rule if it is a link where the attribute href ends in .pdf. If so, a file icon is displayed PDF (icon_pdf.png).Finally, the third block applies to any link with an attribute hrefchange the display mode with display: inline-blockso that the underline only affects the link itself.
Remember that it is also possible to select the beginning of an attribute, using ^= rather $=as we can see in the following example:
to[href^=»****://»]::despues de {
content: » (Not secure page): » attr(href);
display: inline-block;
color: #666;
}
In the case of the previous example, sOnly links that have a file would be selected .pdf where the extension is in lower case. If we have a link to a file .PDF would not be included in that selection. To avoid that, you can add a Yo before closing ] of the attribute:
to[href$=».pdf» i]::before {
content: url(icon_pdf.png);
}
This way you would not have problems with that problem, since that Yo make reference to «case insensitive». This way it would not take into account whether they are uppercase or lowercase, but rather you treat them all as equal.
Learn more about CSS
Now that you know what CSS attributes are and how they work in website programming, Do not hesitate to continue educating yourself about it through our Bootcamp in Web Development, where you can also learn tools that will help you They will allow you to improve your technological development processes.