Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code

Unified Diff: pages/filters.html

Issue 29670666: Issue 6275 - Mention pseudo-element matching in filters documentation (Closed) Base URL: https://hg.adblockplus.org/web.adblockplus.org/
Patch Set: Created Jan. 16, 2018, 8:45 p.m.
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « no previous file | no next file » | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: pages/filters.html
===================================================================
--- a/pages/filters.html
+++ b/pages/filters.html
@@ -247,16 +247,19 @@
{{ abp-properties-1 <code><fix>:-abp-properties(properties)</fix></code> will select elements based upon stylesheet properties. For example <code><fix>:-abp-properties(width:300px;height:250px;)</fix></code> will select elements that have a corresponding CSS rule in a stylesheet which sets the <code><fix>width</fix></code> and <code><fix>height</fix></code> to the values <code><fix>300px</fix></code> and <code><fix>250px</fix></code> respectively. Property names are matched case-insensitively. Furthermore, wildcards can be used so that <code><fix>:-abp-properties(width:*px;height:250px;)</fix></code> will match any width specified in pixels and a height of 250 pixels. }}
</p>
<p>
{{ abp-properties-2 You can also use <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">regular expressions</a> by surrounding the properties expression with "/". For example, <code><fix>:-abp-properties(/width:30[2-8]px;height:250px;/)</fix></code> will match widths between 302 and 308 pixels and a height of 250 pixels. }}
</p>
<p>
{{ abp-properties-3 <em>Note</em>: The <a href="https://adblockplus.org/development-builds/new-css-property-filter-syntax">older syntax</a> for the CSS property filters is deprecated and will be automatically converted to the new format&nbsp;. The syntax to select the style properties remain the same. For example, <code><fix>[-abp-properties='width:300px;height:250px;']</fix></code> will be converted to <code><fix>:-abp-properties(width:300px;height:250px;)</fix></code>. }}
</p>
+<p>
+ {{ abp-properties-4 <code><fix>:-abp-properties()</fix></code> will also select elements using the style properties found in their pseudo-elements, like <code><fix>::before</fix></code> and <code><fix>::after</fix></code>. For example, <code><fix>:-abp-properties(content:'Advertisment')</fix></code> will match elements where the string <em>Advertisment</em> is found in either their <code><fix>::before</fix></code> or <code><fix>::after</fix></code> pseudo element. }}
+</p>
<h4>:-abp-has()</h4>
<p>
{{ abp-has-1 <code><fix>:-abp-has(selector)</fix></code> will select elements based on their content. For example <code><fix>:-abp-has(> div > a.advertiser)</fix></code> will select elements that contain as a direct descendant a <code><fix>&lt;div&gt;</fix></code> that contains an <code><fix>&lt;a&gt;</fix></code> with the class <code><fix>advertiser</fix></code>. The inner selector can be relative to the element scope, and can use any of the pseudo-selectors, including <code><fix>:-abp-has()</fix></code> and will determine whether the selection will occur. }}
</p>
<h4>:-abp-contains()</h4>
<p>
{{ abp-contains-1 <code><fix>:-abp-contains(text)</fix></code> will select elements based on their text content. For example, <code><fix>div.sidebar > span:-abp-contains(Advertisment)</fix></code> will select the <code><fix>&lt;span&gt;</fix></code> elements within a <code><fix>&lt;div&gt;</fix></code>, with a class of <code><fix>sidebar</fix></code> that contains the word "Advertisment". In practice, you'd want to combine this with a <code><fix>:-abp-has()</fix></code> to select the outer container — something like <code><fix>div.sidebar > div:-abp-has(span:-abp-contains(Advertisment))</fix></code> to select the container that would contain an advertisement label. }}
</p>
« no previous file with comments | « no previous file | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld