Side by Side Diff: pages/filter-cheatsheet.html
Issue 29482703:
Issue 5353 - Add advanced element hiding filters documentation (Closed)
Base URL: https://hg.adblockplus.org/web.adblockplus.org/
Patch Set: Added links to sections in the documentation.
Created July 7, 2017, 6:26 p.m.
| Left: | ||
| Right: |
Use n/p to move between diff chunks;
N/P to move between comments.
« no previous file with comments
|
« no previous file
|
pages/filters.html » ('j')
|
pages/filters.html » ('J')
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')
| OLD | NEW |
|---|---|
| 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 152 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 163 } | 163 } |
| 164 th, td | 164 th, td |
| 165 { | 165 { |
| 166 vertical-align: top; | 166 vertical-align: top; |
| 167 padding: 5px; | 167 padding: 5px; |
| 168 } | 168 } |
| 169 td > p:first-child | 169 td > p:first-child |
| 170 { | 170 { |
| 171 margin-top: 0px; | 171 margin-top: 0px; |
| 172 } | 172 } |
| 173 td > code | |
| 174 { | |
| 175 overflow-wrap: break-word; | |
| 176 } | |
| 173 .syntax | 177 .syntax |
| 174 { | 178 { |
| 175 width: 10%; | 179 width: 10%; |
| 176 } | 180 } |
| 177 .purpose | 181 .purpose |
| 178 { | 182 { |
| 179 width: 45%; | 183 width: 45%; |
| 180 } | 184 } |
| 181 .examples | 185 .examples |
| 182 { | 186 { |
| (...skipping 602 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 785 <tr> | 789 <tr> |
| 786 <td><code>##div[style$="width:300px;height:250px;"]</code></td> | 790 <td><code>##div[style$="width:300px;height:250px;"]</code></td> |
| 787 <td>{{s137 Matches div elements that end the style specified}}</td> | 791 <td>{{s137 Matches div elements that end the style specified}}</td> |
| 788 </tr> | 792 </tr> |
| 789 <tr> | 793 <tr> |
| 790 <td><code>##div[style*="width:300px;height:250px;"]</code></td> | 794 <td><code>##div[style*="width:300px;height:250px;"]</code></td> |
| 791 <td>{{s138 Matches div elements that containing the style specified}}</td> | 795 <td>{{s138 Matches div elements that containing the style specified}}</td> |
| 792 </tr> | 796 </tr> |
| 793 </table> | 797 </table> |
| 794 <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 | |
| 800 <h2 id="elementhideemulation">{{s140 Advanced element hiding}}</h2> | |
| 801 | |
| 802 <p>{{s141 <code><fix>#?#</fix></code> indicate an advanced element hiding rule. Unlike the element hiding rules, these require to be specific and therefor to ha ve <a href="#elementdomains">domain selection</a> not be empty. When used with a valid CSS selector, it will hide the elements directly. All the examples of <a href="#elementselection">element selection</a> above apply (replace <code><fix># #</fix></code> with <code><fix>#?#</fix></code>). These filters also support adv anced element selection that are Adblock Plus extensions to CSS.}}</p> | |
| 803 | |
| 804 <p>{{s142 This is a new feature in Adblock Plus 1.13.3 for Chrome and Opera}}.</ p> | |
| 805 | |
| 806 <h3>{{s143 Advanced element selection}}</h3> | |
| 807 | |
| 808 <p>{{s148 Here are the pseudo-classes implemented for the advanced element selec tion}}</p> | |
| 809 | |
| 810 <table> | |
| 811 <col class="selector"> | |
| 812 <col class="selectorPurpose"> | |
| 813 <tr> | |
| 814 <th>{{s149 Pseudo-class}}</th> | |
| 815 <th>{{s127 Purpose}}</th> | |
| 816 </tr> | |
| 817 <tr> | |
| 818 <td><code>:-abp-properties()</code></td> | |
| 819 <td>{{s150 Select an element if its CSS style properties match the one speci fied}}</td> | |
| 820 </tr> | |
| 821 <tr> | |
| 822 <td><code>:-abp-has()</code></td> | |
| 823 <td>{{s151 Select an element if its content subtree match the selector speci fied}}</td> | |
| 824 </tr> | |
| 825 </table> | |
| 826 | |
| 827 <p>{{s144 These few examples show how to use the pseudo-class form of the advanc ed element selection}}</p> | |
| 828 | |
| 829 <table> | |
| 830 <col class="selector"> | |
| 831 <col class="selectorPurpose"> | |
| 832 <tr> | |
| 833 <th>{{s126 Selector}}</th> | |
| 834 <th>{{s127 Purpose}}</th> | |
| 835 </tr> | |
| 836 <tr> | |
| 837 <td><code>#?#div:-abp-properties(width:300px;height:250px;)</code></td> | |
| 838 <td>{{s145 Matches <code><fix>div</fix></code> elements whose style contain the specified properties}}</td> | |
| 839 </tr> | |
| 840 <tr> | |
| 841 <td><code>#?#div:-abp-has(> div > img.advert)</code></td> | |
| 842 <td>{{s146 Matches <code><fix>div</fix></code> elements that contain as a di rect descendant a <code><fix>div</fix></code> containing an <code><fix>img</fix> </code> with the class "advert"}}</td> | |
| 843 </tr> | |
| 844 <tr> | |
| 845 <td><code>#?#div:-abp-has(> div > img:-abp-properties(width:300px;height:250 px;))</code></td> | |
| 846 <td>{{s147 Matches <code><fix>div</fix></code> elements that contain as a di rect descendant element matching the selector: a <code><fix>div</fix></code> tha t has a child <code><fix>img</fix></code> whose style properties contain the spe cified properties}}</td> | |
| 847 </tr> | |
| 848 </table> | |
| 849 | |
| OLD | NEW |
« no previous file with comments
|
« no previous file
|
pages/filters.html » ('j')
|
pages/filters.html » ('J')
