2

Are there any CSS selectors (CSS3+ is fine) that will apply certain styles to an element when there is only a single occurrence?

For example, the following CSS rule:

border: 1px solid black;

...would only apply to .info if there is only one occurrence of .info in the HTML.

So,

<p class="info">This would have a border because there is only one</p>

and,

<p class="info">This would not have a border because there are two</p>
<p class="info">And neither would this</p>

I'm guessing I'm going to have to either programatically apply an additional class such as: .single-occurrence or count the number of occurrences with Javascript?

Edit:

Let me just clear a few things up.

When I mention Javascript as a solution to what I'm trying to do - that does not mean I'm going to use it. I try to avoid JS for anything that is not behaviour. So I don't want a Javascript answer, that's incredibly easy to accomplish - my question is about CSS.

Also, to those getting confused: the reason why there would on occasion be only a single class on the page, is because the actual class I'm using is: search-result. Sometimes there would only be one result. But just because there's only one does not mean that the item cannot be part of the class of objects known as search-result. Semantically (and logically), of course there can be a class of one item. Sometimes, I think people should think a little more about semantics, instead of applying blanket rules.

Chris Harrison
  • 5,512
  • 3
  • 28
  • 36

4 Answers4

4

Depending on the structure of your page, you might be able to use the :only-of-type pseudo-class, which matches if the element has no siblings of the same tag name. I don't think there's a way to get more specific than that.

Cheran Shunmugavel
  • 8,319
  • 1
  • 33
  • 40
  • That seems to work. So now when there is only one search result I can style it like this:#search-results .search-result:only-of-type { border: 0; } – Chris Harrison Apr 22 '12 at 08:25
0

There is no CSS solution for this. I'd go with your JavaScript idea. If you were to use jQuery, you could use something like:

$('.info').length

List of CSS3 pseudo-classes here: http://reference.sitepoint.com/css/css3psuedoclasses

Ayman Safadi
  • 11,502
  • 1
  • 27
  • 41
  • Again... http://stackoverflow.com/questions/2826791/am-i-using-too-much-jquery-when-am-i-crossing-the-line/2826810#2826810 – Madara's Ghost Apr 21 '12 at 17:07
  • 2
    @Truth, while I appreciate your concern for the overuse of jQuery, am suggesting this solution as 1 option in case he's already using jQuery. Sure, there are [other of libraries](http://javascriptlibraries.com/) out there and he might be using, but I wasn't about to post an example for every one. Why use a library at all? Sure, create your own [`getElementsByClassName`](http://ejohn.org/blog/getelementsbyclassname-speed-comparison/) function. But all of that is the OP's prerogative. – Ayman Safadi Apr 21 '12 at 18:11
-1

How about this solution.

CSS

.info.highlight { border: 1px solid black }

JavaScript (using jQuery)

var $info = $('.info');
if ($info.length === 1) { $info.addClass('highlight'); }

Demonstration: http://jsfiddle.net/joshdavenport/YdbuB/

Josh Davenport-Smith
  • 5,456
  • 2
  • 29
  • 40
  • 4
    -1. OP stated he's looking for a CSS selector. He also mentioned he knows that if there isn't one he'll have to resort to JavaScript. Not only you put JavaScript on a [tag:css] question, you've put jQuery too! http://stackoverflow.com/questions/2826791/am-i-using-too-much-jquery-when-am-i-crossing-the-line/2826810#2826810 – Madara's Ghost Apr 21 '12 at 17:00
  • My question is about CSS, not Javascript. Thanks though. – Chris Harrison Apr 22 '12 at 03:27
-3

hello it's a late answer with wrong syntax, but if u use selector like nth... with some very bad coding u could have your result

thufir lee
  • 1