title: What are all the valid selectors for ViewChild and ContentChild?
body: <p>I'm looking for a comprehensive list of the valid selectors I can use to access child components / DOM elements via <code>@ViewChild</code> and <code>@ContentChild</code>.</p>
  
  <p>Say I have a child <code>HelloComponent</code>:</p>
  
  <p>I know I can add a template <code>#ref</code> and query for it, like so:</p>
  
  <pre><code>&lt;hello #myHello&gt;&lt;/hello&gt;
  
  @ViewChild('myHello') myHello: HelloComponent;
  </code></pre>
  
  <p>Or I can look for that component directly (without the template <code>#ref</code>):</p>
  
  <pre><code>@ViewChild(HelloComponent) myHello: HelloComponent;
  </code></pre>
  
  <p>In <a href="https://github.com/angular/angular/issues/21734" rel="noreferrer">this issue</a>, it is mentioned that one can use the following selectors: </p>
  
  <blockquote>
    <p>we are currently supporting a sub-set of CSS selectors:<br>
    * element selectors<br>
    * attribute selectors (including values)<br>
    * :not(...) pseudo-selector<br>
    * combination of the above (including ,)</p>
  </blockquote>
  
  <p>But when I tested these in Stackblitz to verify (<a href="https://stackblitz.com/edit/angular-ltsb4m" rel="noreferrer">here's the link to that</a>), I couldn't actually get any of the first three to work. <em>(Check the console to see <code>undefined</code> for the types of selectors I couldn't get working. I'm unsure if I'm doing something wrong with those selectors or if the actual list is different.)</em></p>
  
  <p>So, which selectors will work? Also, is the list the same for <code>@ViewChild</code>, <code>@ContentChild</code>, <code>@ViewChildren</code>, and <code>@ContentChildren</code>?</p>