how identify first anchor tag in sass in a class?

Question

Suppose the following snippet

<div class="class-a">
   <a href="#">Hello</a>
   <ul>
     <li>
       <a href="#">Hello A</a>
     </li>
     <li>
       <a href="#">Hello B</a>
     </li>
   </ul>
</div>

how select a tag which contains hello text by sass in class-a. please help me.

You wan't to select a either text Hello A or Hello B in your class-a? — RasmusGlenvig, Sep 24 '16 at 08:08
http://stackoverflow.com/questions/1520429/is-there-a-css-selector-for-elements-containing-certain-text — ewcz, Sep 24 '16 at 08:12

score 0 · Answer 1 · answered Sep 24 '16 at 08:21

Try this :

HTML

<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
</ul>

SCSS

$colors: red, orange, yellow, green, blue, purple;

@for $i from 1 through length($colors) {
  li:nth-child(#{length($colors)}n+#{$i}) {
    background: lighten(nth($colors, $i), 20%);
  }
}

checkout the live : https://codepen.io/cimmanon/full/yoCDG/

score 0 · Answer 2 · edited May 23 '17 at 12:19

Short answer, no.

CSS (what Sass compiles into) is a presentation language, it has no knowledge of the content of the page.

The best option would be to decorate all the fields you want styled with a css class and then just use that css class.

If you want to set these classes via JQuery, I think the code you're looking for is this: $('a:contains("Hello")').addClass('helloStyle');

As ewcz commented, here is a link to a duplicate question. Is there a CSS selector for elements containing certain text?

how identify first anchor tag in sass in a class?

2 Answers2