Skip to content

Latest commit

 

History

History
39 lines (32 loc) · 855 Bytes

not-selector-tricks.md

File metadata and controls

39 lines (32 loc) · 855 Bytes

style issues are hard to locate, use !important with caution. If you are applying !important to certain attibutes on a selector but wanting to spare some elements, you can use :not pseudo class.

I am using !important on a's color properties:

a {
    color: inherit !important
}

But I would like this rule not applying to class names starting with abc, here is what I write:

a:not([class^="abc"]) {
    color: inherit !important;
}

Some useful selectors: x[attribute=value]

a[href="codepen.io"] {
    color: #ffffff;
}

x[attribute^=value]

a[class^="awesome"] {
    color: #ffffff; /* selects all link whose class name starts with awesome */   
}

x[attribute*=value]

a[class*="awesome"] {
    color: #ffffff; /* selects all link whose class name contains awesome */   
}