When we style different tags, we can catogorize them by class
and id
, which is commonly used in CSS.
==FYI: #ID{..}
to style id, .CLASS{..}
to style class.==
You can also choose to use “Wildcard” to select tags.
Ex:
<!-- Html -->
<a href="<https://www.google.com>" target="_blank">Google</a>
There are multiple ways to specify this hyperlink using wildcard:
/* CSS */
/* If the anchor has "target" attribute */
a[target] {
color: orange;
}
/* If the anchor's "target" attribute is set to "_blank" */
a[target="_blank"] {
color: orange;
}
/* If "href" is "<https://www.google.com>" (This is Fragile!) */
a[href="<https://www.google.com>"]{
color: orange;
}
/* If "href" contains "google" */
a[href*="google"] {
/* '*=' -> contain */
color: orange;
}
/* If "href" starts with "https" */
a[href^="https"] {
/* '^=' -> start with */
color: orange;
}
/* If "href" ends with ".com" */
a[href$=".com"] {
/* '$=' -> end with */
color: orange;
}