Issue 6069 - Add documentation for :-abp-contains() selector

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 219 matching lines @@
 
   <h3 id="elemhide_css">{{s95 Advanced selectors}}</h3>
 
   <p>{{s97 In general, any CSS selector supported by Firefox can be used for element hiding. For example the following rule will hide anything following a div element with class "adheader": <code><fix>##.adheader + *</fix></code>. For a full list of CSS list see <a href="{{s97-link http://www.w3.org/TR/css3-selectors/}}">W3C CSS specification</a> (note that not all selectors are supported by Firefox yet).}} {{advanced-selectors-2 Please keep in mind that browsers are slower to process these selectors than selectors based on <code><fix>class</fix></code> or <code><fix>id</fix></code> attribute only.}}</p>
 
   <p>{{s98 <em>Note</em>: This functionality is for advanced users only, you should be comfortable with CSS selectors to use it. Adblock Plus won't be able to check the syntax of the selector you are adding, if you use invalid CSS syntax you might break other (valid) rules you have. Check JavaScript Console for CSS errors.}}</p>
 
 <h3 id="elemhide-emulation">{{ elemhide-emulation-heading[heading] Extended CSS selectors (Adblock Plus specific) }}</h3>
 
 <p>
-  {{ elemhide-emulation-1 Sometimes the standard CSS selectors aren't powerful enough to hide an advertisement, for those cases we have added some new ones, namely <code><fix>:-abp-has()</fix></code> and <code><fix>:-abp-properties()</fix></code> (requires Adblock Plus 1.13.3 for Chrome and Opera or higher). }}
+  {{ elemhide-emulation-1 Sometimes the standard CSS selectors aren't powerful enough to hide an advertisement, for those cases we have added some new ones, namely <code><fix>:-abp-has()</fix></code>, <code><fix>:-abp-contains()</fix></code> and <code><fix>:-abp-properties()</fix></code> (requires Adblock Plus 1.13.3 for Chrome and Opera or higher). }}

[Lisa, 2017/11/27 18:32:11]

Sometimes the standard CSS selectors aren't powerful enough to hide an
advertisement. For those cases, we've added some new selectors, namely
<code><fix>:-abp-has()</fix></code>, <code><fix>:-abp-contains()</fix></code>
and <code><fix>:-abp-properties()</fix></code> (requires Adblock Plus 1.13.3 or
higher for Chrome and Opera). }}

[hub, 2017/11/28 19:23:27]

Done.

 </p>
 <p>
   {{ elemhide-emulation-2 When writing an element hiding filter that makes use of these extended selectors you must use the <code><fix>#?#</fix></code> syntax, e.g. <code><fix>example.com#?#selector</fix></code>. But it's important to note that doing so carries a performance impact, so do so sparingly and make sure those filters are specific to as few domains and elements as possible. }}
 </p>
 <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>
 <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. }}

[Lisa, 2017/11/27 18:32:11]

{{ 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. }}

[hub, 2017/11/28 19:23:27]

Done.

+</p>
 
 <h3 id="elemhide_exceptions">{{s99 Exception rules}}</h3>
 
 <p>
   {{s100 Exception rules can disable existing rules on particular domains.}} {{s101 These are mostly
   useful to filter subscription authors who are extending another filter subscription that they
   cannot change.}} {{s102 For example, the rule <code><fix>##.textad</fix></code> can be
   disabled on <code><fix>example.com</fix></code> using the exception rule
   <code><fix>example.com#@#.textad</fix></code>.}} {{s103 The combination of these two
   rules has exactly the same effect as the single rule
@@ skipping 23 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>