Issue 6275 - Mention pseudo-element matching in filters documentation

pages/filters.html

 title=Writing Adblock Plus filters
 
 
 <p>{{s1 Current Adblock Plus versions allow you to "tweak" your filters in many different ways. This document explains the choices that you have and how they can be used.}}</p>
 
   <p>{{s2 <em>Disclaimer</em>: All filter examples given here are really only examples and are not meant to be used.}}</p>
 
   <h2 id="introduction">{{s3 Introduction to Adblock Plus filters}}</h2>
 
   <p>{{s4 The options described in this section should be enough for users who have to create a filter occasionally.}}</p>
@@ skipping 234 matching lines @@
 <h4>:-abp-properties()</h4>
 <p>
   {{ 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>
 
 <h3 id="elemhide_exceptions">{{s99 Exception rules}}</h3>
@@ skipping 31 matching lines @@
   {{s110 The data used for creating the signature is a concatenated list of request variables (namely URI, host and user agent) separated by the <code><fix>NUL</fix></code> character "\0". For example:}}
 </p>
 
 <pre>
   /index.html?q=foo\0www.example.com\0Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:30.0) Gecko/20100101 Firefox/30.0
 </pre>
 
 <p>
   {{s111 Finally, generate the signature for this string by using the signature algorithm SEC_OID_ISO_SHA_WITH_RSA_SIGNATURE (default when using OpenSSL).}}
 </p>