Delta Between Two Patch Sets: pages/filter-cheatsheet.html
Issue 29482703:
Issue 5353 - Add advanced element hiding filters documentation (Closed)
Base URL: https://hg.adblockplus.org/web.adblockplus.org/
Left Patch Set: forgotten changes. more changes.
Created July 18, 2017, 3:49 p.m.
Right Patch Set: Added [header]
Created July 28, 2017, 8:03 p.m.
| Left: | ||
| Right: |
Use n/p to move between diff chunks;
N/P to move between comments.
« no previous file with change/comment
|
« no previous file
|
pages/filters.html » ('j')
|
no next file with change/comment »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
| LEFT | RIGHT |
|---|---|
| 1 title=Adblock Plus filters explained | 1 title=Adblock Plus filters explained |
| 2 | 2 |
| 3 <head> | 3 <head> |
| 4 <style type="text/css"> | 4 <style type="text/css"> |
| 5 #content | 5 #content |
| 6 { | 6 { |
| 7 max-width: none; | 7 max-width: none; |
| 8 } | 8 } |
| 9 | 9 |
| 10 canvas | 10 canvas |
| (...skipping 779 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 790 <td><code>##div[style$="width:300px;height:250px;"]</code></td> | 790 <td><code>##div[style$="width:300px;height:250px;"]</code></td> |
| 791 <td>{{s137 Matches div elements that end the style specified}}</td> | 791 <td>{{s137 Matches div elements that end the style specified}}</td> |
| 792 </tr> | 792 </tr> |
| 793 <tr> | 793 <tr> |
| 794 <td><code>##div[style*="width:300px;height:250px;"]</code></td> | 794 <td><code>##div[style*="width:300px;height:250px;"]</code></td> |
| 795 <td>{{s138 Matches div elements that containing the style specified}}</td> | 795 <td>{{s138 Matches div elements that containing the style specified}}</td> |
| 796 </tr> | 796 </tr> |
| 797 </table> | 797 </table> |
| 798 <p>{{s139 The above filters are only examples of valid element hiding rules. Any <a href="http://www.w3.org/TR/css3-selectors/">CSS selector</a> supported by Fi refox can be used for element hiding.}}</p> | 798 <p>{{s139 The above filters are only examples of valid element hiding rules. Any <a href="http://www.w3.org/TR/css3-selectors/">CSS selector</a> supported by Fi refox can be used for element hiding.}}</p> |
| 799 | 799 |
| 800 <h3 id="elementhideemulation">{{abp-pseudo-select-title Extended CSS selectors ( Adblock Plus specific)}}</h3> | 800 <h3 id="elementhideemulation">{{ abp-pseudo-select-heading[heading] Extended CSS selectors (Adblock Plus specific) }}</h3> |
| 801 | 801 |
| 802 <p>{{abp-pseudo-select-explanation-p1 In some situations standard CSS selectors are not sufficient, for those cases you can also use the following Adblock Plus specific pseudo-selectors:}}</p> | 802 <p>{{ abp-pseudo-select-1 In some situations standard CSS selectors are not suff icient, for those cases you can also use the following Adblock Plus specific pse udo-selectors: }}</p> |
| 803 | 803 |
| 804 <table> | 804 <table> |
| 805 <col class="selector"> | 805 <col class="selector"> |
| 806 <col class="selectorPurpose"> | 806 <col class="selectorPurpose"> |
| 807 <tr> | 807 <tr> |
| 808 <th>{{pseudo-class-header Pseudo-class}}</th> | 808 <th>{{ pseudo-class-header[header] Pseudo-class }}</th> |
| 809 <th>{{s127 Purpose}}</th> | 809 <th>{{ s127 Purpose }}</th> |
| 810 </tr> | 810 </tr> |
| 811 <tr> | 811 <tr> |
| 812 <td><code>:-abp-properties()</code></td> | 812 <td><code>:-abp-properties()</code></td> |
| 813 <td>{{abp-properties-purpose Select an element if its CSS style properties m atch what's specified}}</td> | 813 <td>{{ abp-properties-purpose Select an element if its CSS style properties match what's specified }}</td> |
| 814 </tr> | 814 </tr> |
| 815 <tr> | 815 <tr> |
| 816 <td><code>:-abp-has()</code></td> | 816 <td><code>:-abp-has()</code></td> |
| 817 <td>{{abp-has-purpose Select an element if its content subtree match the sel ector specified}}</td> | 817 <td>{{ abp-has-purpose Select an element if its content subtree match the se lector specified }}</td> |
| 818 </tr> | 818 </tr> |
| 819 </table> | 819 </table> |
| 820 | 820 |
| 821 <p>{{abp-pseudo-select-explanation-p2 When writing element hiding filters that m ake use those you must use the <code>#?#</code> syntax (replace <code>##</code> with <code>#?#</code>) and take care to specify one or more domains. Some exampl es:}}</p> | 821 <p>{{ abp-pseudo-select-2 When writing element hiding filters that make use thos e you must use the <code>#?#</code> syntax (replace <code>##</code> with <code># ?#</code>) and take care to specify one or more domains. Some examples: }}</p> |
| 822 | 822 |
| 823 <table> | 823 <table> |
| 824 <col class="selector"> | 824 <col class="selector"> |
| 825 <col class="selectorPurpose"> | 825 <col class="selectorPurpose"> |
| 826 <tr> | 826 <tr> |
| 827 <th>{{s126 Selector}}</th> | 827 <th>{{ s126 Selector }}</th> |
| 828 <th>{{s127 Purpose}}</th> | 828 <th>{{ s127 Purpose }}</th> |
| 829 </tr> | 829 </tr> |
| 830 <tr> | 830 <tr> |
| 831 <td><code>example.com#?#div:-abp-properties(width:300px;height:250px;)</code ></td> | 831 <td><code>example.com#?#div:-abp-properties(width:300px;height:250px;)</code ></td> |
| 832 <td>{{abp-properties-example1 Matches <code><fix>div</fix></code> elements w hose style contain the specified properties}}</td> | 832 <td>{{ abp-properties-example Matches <code><fix>div</fix></code> elements w hose style contain the specified properties }}</td> |
| 833 </tr> | 833 </tr> |
| 834 <tr> | 834 <tr> |
| 835 <td><code>example.com#?#div:-abp-has(> div > img.advert)</code></td> | 835 <td><code>example.com#?#div:-abp-has(> div > img.advert)</code></td> |
| 836 <td>{{abp-has-example1 Matches <code><fix>div</fix></code> elements that con tain as a direct descendant a <code><fix>div</fix></code> containing an <code><f ix>img</fix></code> with the class "advert"}}</td> | 836 <td>{{ abp-has-example1 Matches <code><fix>div</fix></code> elements that co ntain as a direct descendant a <code><fix>div</fix></code> element whose direct descendant is an <code><fix>img</fix></code> with the class "advert" }}</td> |
| 837 </tr> | 837 </tr> |
| 838 <tr> | 838 <tr> |
| 839 <td><code>example.com#?#div:-abp-has(> div > img:-abp-properties(width :300px;height:250px;))</code></td> | 839 <td><code>example.com#?#div:-abp-has(> div > img:-abp-properties(width :300px;height:250px;))</code></td> |
| 840 <td>{{abp-has-example2 Matches <code><fix>div</fix></code> elements that con tain as a direct descendant an element that contains a <code><fix>div</fix></cod e> whose direct descendent is an <code><fix>img</fix></code> element whose style properties contain the specified properties, a <code><fix>width</fix></code> of 300 pixels and an <code><fix>height</fix></code> of 250 pixels}}</td> | 840 <td>{{ abp-has-example2 Matches <code><fix>div</fix></code> elements that co ntain as a direct descendant a <code><fix>div</fix></code> element whose direct descendant is an <code><fix>img</fix></code> element whose style properties cont ain the specified properties, a <code><fix>width</fix></code> of 300 pixels and an <code><fix>height</fix></code> of 250 pixels }}</td> |
| 841 </tr> | 841 </tr> |
| 842 <tr> | 842 <tr> |
| 843 <td><code>example.com#?#div:-abp-has(> div > img:-abp-properties(WidTh :300px;hEigHt:250px;))</code></td> | 843 <td><code>example.com#?#div:-abp-has(> div > img:-abp-properties(WidTh :300px;hEigHt:250px;))</code></td> |
| 844 <td>{{abp-has-example3 Since the CSS properties are matched case-insensitive ly, this filter matches the same thing as above}}</td> | 844 <td>{{ abp-has-example3 Since the CSS properties are matched case-insensitiv ely, this filter matches the same thing as above }}</td> |
| 845 </tr> | 845 </tr> |
| 846 <tr> | 846 <tr> |
| 847 <td><code>example.com#?#div > img:-abp-properties(width:*px;height:250px; )</code></td> | 847 <td><code>example.com#?#div > img:-abp-properties(width:*px;height:250px; )</code></td> |
| 848 <td>{{abp-properties-example1 By using a wildcard <code>*</code>, this filte r matches an <code>img</code> whose CSS style properties have a <code>width</cod e> specified in pixels and a <code>height</code> of 250 pixels}}</td> | 848 <td>{{ abp-properties-example1 By using a wildcard <code>*</code>, this filt er matches an <code>img</code> whose CSS style properties have a <code>width</co de> specified in pixels and a <code>height</code> of 250 pixels }}</td> |
| 849 </tr> | 849 </tr> |
| 850 <tr> | 850 <tr> |
| 851 <td><code>example.com#?#div > img:-abp-properties(/width: 3[2-8]px;/)</co de></td> | 851 <td><code>example.com#?#div > img:-abp-properties(/width: 3[2-8]px;/)</co de></td> |
| 852 <td>{{abp-properties-example2 By using a regular expression, this filter mat ches an <code>img</code> whose CSS style properties have a <code>width</code> be tween 32 and 38 pixels}}</td> | 852 <td>{{ abp-properties-example2 By using a regular expression, this filter ma tches an <code>img</code> whose CSS style properties have a <code>width</code> b etween 32 and 38 pixels }}</td> |
| 853 </tr> | 853 </tr> |
| 854 </table> | 854 </table> |
| 855 | 855 |
| LEFT | RIGHT |
« no previous file
|
pages/filters.html » ('j')
|
Toggle Intra-line Diffs ('i')
|
Expand Comments ('e')
|
Collapse Comments ('c')
|
Toggle Comments ('s')
