access html content through CSS ?

Question

<div id=menu>
 <ul>
  <li class="section-title">auto-text1</li>
  <li class="section-title">auto-text2</li>
  <li class="section-title">auto-text3</li>
 </ul>
</div>

How can I give special treatment to auto-text3 through css?

Answer 1

You could use the :nth-of-type() pseudo-class selector:

#menu > ul > li.section-title:nth-of-type(3)

This will select the third element of all li elements with the class section-title.

Answer 2

See section 6.6.5.7. of the CSS3 - future - proposal:

:last-child pseudo-class

Same as :nth-last-child(1). The :last-child pseudo-class represents an element that is the last child of some other element.

ul > li:last-child { }

http://www.w3.org/TR/css3-selectors/#last-child-pseudo

(In your example </menu> probably is meant to be the closing </div>.)

For the time being I guess it's still best to use classes marking the first and last list element, or simple Javascript on your #menu id.

Answer 3

Just to clarify the other answers, there aren’t (currently) any CSS selectors that let you select an element based on its content.