css to select list items and dropdown options
The PIR (Philosophy in Review) is now on the library's OJS system. As I can't modify the xhtml in their templates, the only modifications I can make are through CSS. IE does not support the nth-child selector, but does support selectors that allow you to specify an attribute and value.
For example, if you have this xhtml:
<select name="searchField" size="1" class="selectMenu">
<option label="All" value="">All</option>
<option label="Authors" value="1">Authors</option>
<option label="Title" value="2">Title</option>
</select>
this css selector will find the option for Authors :
select.selectMenu>option[label="Authors"] {
/* css rules here */
}
One remaining limitation of IE is that it does not support the :before and :after pseudoclasses on select options, so this rule will fail in IE, but will work in other browsers:
select.selectMenu>option[label="Title"]:after {
content:" or Author of Book";
}
In the case of lists, IE (as well as other browsers) supports the advanced attribute-based selector and the :after pseudo-class, so this works in all browsers:
#sidebarNavigation ul>li>a[href$="titles"]:after {
content:" or Author of Book";
}
given an xhtml structure like this (urls truncated by me)
<div class="block" id="sidebarNavigation">
<span class="blockSubtitle">Browse</span>
<ul>
<li><a href="http:.../archive">By Issue</a></li>
<li><a href="http:.../authors">By Author</a></li>
<li><a href="http:.../titles">By Title</a></li>
</ul>
</div>