How to use CSS attribute selectors to splice HTML DNA

CSS attribute selectors are amazing. They can help you avoid adding tons of class names and point out problems in your code. But don’t panic, although attribute selectors are complex and powerful, they are easy to learn and use. In this article, we’ll discuss how they work and give you some tips on how to use them.

Generally, the most common way we use it is to put HTML attributes into square brackets, which is called an attribute selector. For example:

[href] {
    color:chartreuse;
}

Any html element with an href attribute and no more specific selector will now turn yellow-green. The characteristics of attribute selectors are the same as class selectors

But you can do a lot more with attribute selectors. Just like your DNA, they have embedded logic that helps you choose various attribute combinations and values. They can not only match exact tag, class or id selectors, but can also match any attribute or even string value in a property.

Attribute selection

Attribute selectors can stand alone or be more specific, such as we need to select all div tags that have a title attribute.

div[title]

You can also select the child elements of the div with the title attribute by doing the following:

div [title]

It should be clear that the space in the middle represents the background selector, which selects the child elements of the element with this attribute. We can also be more precise and select the desired attribute value:

div[title="dna"]

Most of the time, attribute selectors don't need quotes, but I use them because I believe it improves readability and ensures good compatibility.

If you want to select attribute values ​​that have the character "dna" from the space-delimited list, such as "my beautiful dna" or "mutating dna is fun!", you can add a tilde `~` before the equal sign:

div[title~="dna"]

You can choose a title like "dontblamemeblamemydna" or "his-stupidity-is-from-upbringing-not-dna" and then use a dollar sign `$` to match the end of the title:

[title$="dna"]

To match the beginning of a property value, such as the headings "dnamutants" or "dna-splicing-for-all", use the caret character `^`.

[title^="dna"]

If you want to match a value at the beginning of a complete word, you can use the pipe character to do so. For example, you don’t want to select a title of “genealogy”, but still want to select “gene” and “gene-data”:

[title|="gene"]

There is also a fuzzy search attribute operator `*` that matches any substring:

[title*="dna"]

One last thing to know is that you can add a flag to make the property search case insensitive. Add an `i` before the closing square bracket:

[title*="DNA" i]

What makes these attribute selectors even more powerful is that they are stackable — allowing you to select elements with multiple matching factors.

For example, if you need to find an a tag that has a title attribute and a class that ends with "genes", how do you write it?

a[title][class$="genes"]

Not only can we select attributes of HTML elements, we can also use pseudo-"science" (i.e. pseudo-elements and content declarations) to print out text:

<span class="joke" title="Gene Editing!">What's the first thing a biotech journalist does after finishing the first draft of an article?</span>

.joke:hover:after {
   content: "Answer:" attr(title);
   display: block;
}

The above code will display a custom string when the mouse hovers over it.

Now that we have seen how to make selections using attribute selectors, let’s look at some use cases. I've divided them into two categories: general usage tips and diagnostics.

General usage tips

Input type settings

You can set the input type differently, such as email vs. phone:

input[type="email"] {
   color: papayawhip;
}
input[type="tel"] {
   color: thistle;
}

Show mobile number link

You can hide phone numbers in certain sizes and show a phone link to make it easy to call on the phone:

span.phone {
   display: none;
}
a[href^="tel"] {
   display: block;
}

Internal links vs external links, secure links vs non-secure links

You can treat internal and external links differently and set secure links differently than insecure links:

a[href^="http"]{
   color: bisque;
}
a:not([href^="http"]) {
  color: darksalmon;
}
 
a[href^="http://"]:after {
   content: url(unlock-icon.svg);
}
a[href^="https://"]:after {
   content: url(lock-icon.svg);
}

Download Icon

One of the attributes HTML5 gives us is "download", which tells the browser to, you guessed it, download the file instead of trying to open it. This is useful for PDFs and DOCs that you want people to access but don't want them to open right away. It also makes the workflow of downloading a large number of files in succession much easier. The downside of the download attribute is that there is no default visual effect to distinguish it from a more traditional link. Usually this is what you want, but if it's not, you can do something like the following:

a[download]:after { 
   content: url(download-arrow.svg);
}

You can also use different icons (like PDF vs. DOCX vs. ODF, etc.) to communicate the file type:

a[href$="pdf"]:after {
   content: url(pdf-icon.svg);
}
a[href$="docx"]:after {
   content: url(docx-icon.svg);
}
a[href$="odf"]:after {
   content: url(open-office-icon.svg);
}

You can also ensure these icons are only on downloadable links by stacking attribute selectors:

a[download][href$="pdf"]:after {
   content: url(pdf-icon.svg);
}

Overwrite or reuse deprecated/deprecated code

We’ve all come across old websites with outdated code. Prior to HTML5, you might need to override or even reapply styles that were implemented as attributes:

<div bgcolor="#000000" color="#FFFFFF">Old, holey genes</div>
div[bgcolor="#000000"] { /*override*/
   background-color: #222222 !important;
}
div[color="#FFFFFF"] { /*reapply*/
   color: #FFFFFF;
}

Display file types

By default, the list of acceptable files for the file type input tag is not visible. Typically, we use pseudo-elements to expose them, and while you can’t use pseudo-elements on most input tags (or in Firefox or Edge), you can use them on file inputs:

<input type="file" accept="pdf,doc,docx">
[accept]:after {
   content: "Acceptable file types: " attr(accept);
}

HTML Accordion Menu

The details and summary tags are a way to make an expandable/accordion menu using only HTML. The details tag includes the summary tag and the content to be displayed when the accordion is opened. Clicking summary will expand the details tag and add the open attribute. We can easily style the open details tag with the open attribute:

<details>
  <summary>List of Genes</summary>
    Roddenberry
    Hackman
    Wilder
    Kelly
    Luen Yang
    Simmons
</details>
details[open] {
   background-color: hotpink;
}

Print Link

a[href]:after {
   content: " (" attr(href) ") ";
}

Custom Tools

Creating custom tooltips is fun and easy using attribute selectors:

[title] {
  position: relative;
  display: block;
}
[title]:hover:after {
  content: attr(title);
  color: hotpink;
  background-color: slateblue;
  display: block;
  padding: .225em .35em;
  position: absolute;
  right: -5px;
  bottom: -5px;
}

diagnosis

These options are used to help us identify problems during the build process or locally when trying to fix them. Placing this content on our production site would expose users to errors.

Audio without controls attribute

I don't use the audio tag often, but when I do use it I often forget to include the controls attribute. Result: Nothing is displayed. If you're working in Firefox, if you have the audio element hidden, or if syntax or some other problem prevents it from appearing (only works in Firefox), this code may help you fix the problem:

audio:not([controls]) {
  width: 100px;
  height: 20px;
  background-color:chartreuse;
  display: block;
}

No alt text

Images without alt attributes are an accessibility nightmare. They’re hard to find just by looking at the page, but if you add them, they’ll pop out (and when the page image fails to load, the alt text can better explain what the image does):

img:not([alt]) { /* no alt attribute */ 
  outline: 2em solid chartreuse; 
}
img[alt=""] { /* alt attribute is blank */ 
  outline: 2em solid cadetblue; 
}

Asynchronous JavaScript Files

A web page can be a collection of content management systems and plugins, frameworks, and code, and Ted wrote on vacation that determining which JavaScript loads asynchronously and which doesn’t can help you focus on improving page performance:

script[src]:not([async]) {
  display: block;
  width: 100%;
  height: 1em;
  background-color: red;
}
script:after {
  content: attr(src);
}

Javascript Events

You can also highlight elements with JavaScript event attributes, I'm using the OnMouseOver attribute as an example here, but it works for any JavaScript event attribute:

[OnMouseOver] {
   color: burlywood;
}
[OnMouseOver]:after {
   content: "JS: " attr(OnMouseOver);
}

Summarize

The above is the method I introduced to you to use CSS attribute selectors to splice HTML DNA. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!