Skip to content

advanced.md

Latest commit

 

History

History
93 lines (71 loc) · 2.81 KB

advanced.md

File metadata and controls

93 lines (71 loc) · 2.81 KB
Raw

Advanced techniques

Overwriting page styles

User styles need to override existing CSS on the page. Which rule wins when multiple rules target the same property is determined by the CSS cascade.

!important

The most reliable approach is adding !important to your declarations:

a {
    text-decoration: none !important;
}

Specificity

When two rules have the same importance, the one with the higher specificity wins. You can increase specificity by writing longer selectors:

/* Instead of: */
#bar { color: red !important; }

/* Use a more specific selector: */
#foo #bar { color: red !important; }
/* or: */
div#bar { color: red !important; }

AGENT_SHEET

Include /* AGENT_SHEET */ anywhere in your style to make it apply as an agent sheet. This lets you style anonymous content such as scrollbars and the internal parts of <input type="file">.

This comment only works in Stylem. Agent sheets can crash your browser - only use this mode when necessary.

Replacing images in <img> tags

Replacing <img> elements requires a CSS trick since you cannot change the src attribute with CSS alone:

#your-selector-here {
    height: 0 !important;
    width: 0 !important;
    /* these numbers match the new image's dimensions */
    padding-left: 125px !important;
    padding-top: 25px !important;
    background: url(http://example.com/your/image/here) no-repeat !important;
}

Selecting specific elements

User styles use standard CSS selectors to target elements. Since you cannot modify the page's HTML, you may need creative strategies:

  • Combinators - start from an element that has an ID or class and navigate to the target: 
    #prices td:nth-child(2) { text-align: right !important; }
  • Attribute selectors - match elements by their attributes: 
    .container p[style*="float: right"] { display: none !important; }
  • Structural pseudo-classes - select by position in the document: 
    .container p:first-child { font-weight: bold !important; }

DOM Inspector tool

If you have DOM Inspector installed, Stylem adds a Copy Selector menu to the right-click context menu. Open DOM Inspector, right-click a node in the left pane, and choose a suggested selector.

Selector Gadget

The Selector Gadget bookmarklet can help generate selectors interactively. Click elements you want to select, then elements you want to exclude, and it will suggest the simplest matching selector.