2

I can't understand what I'm doing wrong, but :contains css selector not work for me. Is it excluded from current css3 implementation? I check it in FF, chrome and IE, all of them ignore background: red property.

<!DOCTYPE html>
<html>
<head>
<style>
.a {
border: 1px solid black;
width: 20px;
height: 30px;
position: relative;
}

.a:contains("1") {
background: red;
}
</style>
</head>
<body>
<div class="a">1</div>
</body>
</html>
degr
  • 1,559
  • 1
  • 19
  • 37
  • CSS doesn't have a `:contains` selector, javascript and jQuery has a method though – Asons Aug 30 '17 at 08:22
  • https://www.w3.org/TR/2001/CR-css3-selectors-20011113/#content-selectors and here http://www.xml.com/pub/a/2003/06/18/css3-selectors.html?page=2 – degr Aug 30 '17 at 08:23
  • 2
    Documents from 2001 are not valid anymore. There is talk of a `:has()` selector, but it's not clear if that will ever be implemented, and it would work only for subselectors, not text content. – Mr Lister Aug 30 '17 at 08:24
  • 1
    @Mr Lister: I've stated numerous times that the CSSWG really needs to slap on the same gigantic "This document is obsolete" notices that the HTML WG does with theirs. – BoltClock Aug 30 '17 at 08:35
  • @LGSon: [heh.](https://stackoverflow.com/questions/45955530/how-to-ignore-matches-in-descendent-elements-when-using-jquery-contains) – BoltClock Aug 30 '17 at 08:41
  • @BoltClock Just added a link in my answer :) – Asons Aug 30 '17 at 08:42

1 Answers1

7

The pseudo-class :contains() has been removed from the specs.

6.6.6. Blank

This section intentionally left blank. (This section previously defined a :contains() pseudo-class.)

https://www.w3.org/TR/css3-selectors/#content-selectors

Here is how you can use javascript, or jQuery (12th answer)

Asons
  • 84,923
  • 12
  • 110
  • 165
  • 1
    Thanks man, I need no references about js. I bet with one guy, that I will do html+css calculator. – degr Aug 30 '17 at 08:43
  • @degr You might still can...though _that_ is a new question :) – Asons Aug 30 '17 at 08:44
  • 1
    A calculator written in CSS? That would be a challenge. I wouldn't get much further than [this](https://jsfiddle.net/MrLister/rLta157b/). – Mr Lister Aug 30 '17 at 12:24
  • @MrLister Nice try :) ... was actually not thinking that far when I said _might still can_, though now you made the _think_ :) and I can't see how that would be possible – Asons Aug 30 '17 at 12:27