title: Selenium CSS selector syntax for checking class and text both
body: <p>Question is for JAVA + Selenium:</p>
  
  <p>My HTML is:</p>
  
  <pre><code>&lt;section class="d-menu d-outclass-bootstrap unclickable d-apps d-app-list"&gt;
  &lt;section class="standard-component image-sequence-button" tabindex="0" role="link"&gt;
      &lt;div class="image-region"&gt;
          &lt;div class="core-component image"&gt;...
      &lt;/div&gt;
      &lt;div class="sequence-region"&gt;
          &lt;div class="core-component section"&gt;
              &lt;div&gt;
                  &lt;section class="standard-component text hide-section-separator-line"&gt;
                      &lt;div class="text-region"&gt;
                          &lt;div class="core-component text"&gt;
                              &lt;span class="main-text"&gt;BART Times&lt;/span&gt;
                              &lt;span class="sub-text"&gt;Provider&lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/section&gt;
                  &lt;section class="standard-component speech-bubble hide-section-separator-line"&gt;...
                  &lt;section class="standard-component text"&gt;...
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="button-region"&gt;
          &lt;div class="core-component button" tabindex="0" role="link"&gt;...
      &lt;/div&gt;
  &lt;/section&gt;
  &lt;section class="standard-component image-sequence-button" tabindex="0" role="link"&gt;...
  &lt;section class="standard-component image-sequence-button" tabindex="0" role="link"&gt;...
  &lt;section class="standard-component image-sequence-button" tabindex="0" role="link"&gt;...&lt;/section&gt;
  </code></pre>
  
  <p><strong>EDIT:</strong></p>
  
  <p>All <code>&lt;section class="standard-component image-sequence-button"...</code> have exact same structure and hierarchy (same attributes for all tags). The only thing that changes are the TEXT values of the tags(e.g. <code>span</code>)</p>
  
  <p><strong>PART1:</strong>
  I'm looking for various elements inside the second <code>section</code> tag. So, What I'm trying to do is get the <code>&lt;span class="main-text"&gt;</code> which has a value <code>BART Times</code> because of the business requirement.</p>
  
  <p>I already know how to get it via xpath:</p>
  
  <p>My xpath (verified via firebug): </p>
  
  <pre><code>"//section//div[@class = 'sequence-region']//section[@class = 'standard-component text hide-section-separator-line']//span[@class = 'main-text' and text() = '%s']"
  </code></pre>
  
  <p>I can get the <code>span</code> tag via checking for %s values (e.g. BART Times).</p>
  
  <p>However, due to design considerations, we've been told to use CSS only. So, I tried to come up with a CSS counterpart for the above xpath but did not find it.</p>
  
  <p>The following CSS</p>
  
  <pre><code>"section div.sequence-region section.standard-component.text.hide-section-separator-line span[class=main-text]"
  </code></pre>
  
  <p>returns all the <code>span</code> tags under all the <code>section</code> tags. </p>
  
  <p><strong>Question1:</strong> How do I get the <code>span</code> tag which has a certain TEXT value (the %s part of xpath)?</p>
  
  <p>Things I've tried for that last <code>span</code> tag which did not worked(according to the firebug):</p>
  
  <ul>
  <li><p>span.main-text[text='BART Times']</p>
  
  <p>span[class=main-text][text='BART Times']</p>
  
  <p>span.main-text:contains('BART Times')</p>
  
  <p>span[class=main-text]:contains('BART Times')</p>
  
  <p>span.main-text[text="BART Times"]</p>
  
  <p>span[class=main-text][text="BART Times"]</p>
  
  <p>span.main-text[text=\"BART Times\"]</p>
  
  <p>span[class=main-text][text=\"BART Times\"]</p>
  
  <p>span[text="BART Times"]</p>
  
  <p>span[text=\"BART Times\"]</p>
  
  <p>span:contains('BART Times')</p>
  
  <p>span:contains("BART Times")</p>
  
  <p>span:contains(\"BART Times\")</p></li>
  </ul>
  
  <p>So, basically I want to put a check on BOTH <code>class</code> and <code>TEXT</code> value of the span tag in CSS selector.</p>
  
  <p><strong>Part 2:</strong>
  Then I want to get the <code>&lt;section class="standard-component image-sequence-button"...</code> element where I found the <code>&lt;span class="main-text"&gt;</code> and then find other elements inside that specific <code>section</code> tag</p>
  
  <p><strong>Question 2:</strong>
  Assuming, I found the <code>span</code> tag in question 1 via CSS, how do I get the <code>section</code> tag (which is a super--- parent of the <code>span</code> tag)?</p>
  
  <p>If CSS is not possible, please provide an xpath counterpart for this as a workaround for a while.</p>