Css: How to Select Data Value Greater Than

CSS: Can I select data value greater than?

Here is an idea based on this previous answer where you can consider CSS variables:

.box {  font-size:30px;  padding:5px;  display:inline-block;  font-family:monospace;  overflow:hidden;  color:#fff;  background:     linear-gradient(red,red) 0 0/100% calc((18 - var(--a))*1px),     blue;}.box:before {  content:attr(style);  text-indent:-4ch;  display:inline-block;}

<div style="--a:30" class="box"></div><div style="--a:18" class="box"></div><div style="--a:9 " class="box"></div><div style="--a:17" class="box"></div><div style="--a:0 " class="box"></div>

Is it possible to select all elements with an attribute value greater than a certain number?

No, there's no way in pure CSS.

Possible attribute selectors are:

• [att]
  
• [att=val]
  
• [att~=val]
  
• [att|=val]
  

And W3's docs on Attribute Selector adds:

Attribute values must be CSS identifiers or strings. [CSS21] The case-sensitivity of attribute names and values in selectors depends on the document language.

So, they're not numeric. There's no way to use any numeric comparision.

jQuery: Selecting all elements where attribute is greater than a value

You can do this using the function overload of .filter(), like this:

.filter(function() {
  return $(this).attr("attrName") > "someValue";
})

CSS rule for number greater than

You can't with pure css,you must help of jquery:

$(document).ready(function(){  $('tr.positive td.happy').each(function(){    number = parseFloat($(this).text());    if(number > 10)      $(this).addClass('greater10');    if(number > 50)      $(this).addClass('greater50');  })})

td {  border: 1px solid #000;}
.greater10 {  color: red;}
.greater50 {  color: blue;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><table>  <tbody>    <tr class="positive">      <td class="happy">12</td>      <td class="happy">7</td>      <td class="happy">69</td>    </tr>  </tbody></table>

CSS nth-child for greater than and less than

:nth-child() doesn't work on classes, it looks for the element itself. You'd need to wrap the .container divs by a wrapper and use the following:

.wrapper div:nth-child(n+3) {
   /* put your styles here... */
}

<div class="wrapper">
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
</div>

Working Demo.

Clarifying on :nth-child()

Using .container:nth-child(n+3) may or may not work. Because, :nth-child() pseudo-class represents nth child element matching the selector (.container in this case).

If the .container element isn't the nth-child of its parent, it won't be selected.

From the Spec:

The :nth-child(an+b) pseudo-class notation represents an element
that has an+b-1 siblings before it in the document tree, for any
positive integer or zero value of n, and has a parent element.

Consider this example:

<div class="parent">
    <div>1st</div>
    <div>2nd</div>
    <div>3rd</div>
    <div class="container">4th</div>
    <div class="container">5th</div>
    <div class="container">6th</div>
    <div>7th</div>
    <div class="container">8th</div>
    <div>9th</div>
</div>

In this case, .container:nth-child(2) won't select the 2nd div.container element (which has 5th content). Because that element is not the 2nd child of its parent, in parent's children tree.

Also, .container:nth-child(n+3) will select all the div.container elements because n starts from 0 for the first element in the parent's children tree, and the first div.container is the 4th child of its parent.

n starts from 0

n = 0: (0 + 3) = 3 => 3rd element
n = 1: (1 + 3) = 4 => 4th element
n = 2: (2 + 3) = 5 => 5th element
...

Hence div.container:nth-child(n+3) represents all the 3rd, 4th, 5th, ... child elements matching div.container selector.

Online Demo.

CSS selector to match class with number greater than

SASS

@for $i from 3 through 6 {
    .x-ios-#{$i} { background:blue; }
}

generates

.x-ios-3 { background:blue; }
.x-ios-4 { background:blue; }
.x-ios-5 { background:blue; }
.x-ios-6 { background:blue; }

Regular CSS

div { width:100px;height:100px;border:1px solid black;float:left; }
[class^="x-ios-"]:not([class*="1"]):not([class*="2"]) { background:blue; }

<div class="x-ios-1"></div>
<div class="x-ios-2"></div>
<div class="x-ios-3"></div>
<div class="x-ios-4"></div>
<div class="x-ios-5"></div>
<div class="x-ios-6"></div>

---

Or come up with a nth recipe for whatever your use case is..

:nth-child(n+5) matches children 5, 6, 7, ...
:nth-child(2n+5) matches children 5, 7, 9, ...
:nth-child(-n+7) matches children 1, 2, 3, 4, 5, 6, 7
:nth-child(-3n+8) matches children 2, 5, and 8

CSS data attribute conditional value selector?

With CSS you can select elements with their attributes:

div[data-points] {  }

or the value of their attributes:

div[data-points="800"] {  }

but you can't use conditions in CSS.

I would recommend you to use a javaScript solutions for this problem which can be so easy, for example, using jQuery you can do something like:

$("div[data-points]").each(function() {
    if ($(this).attr('data-points') > 1000) {
        $(this).addClass('larger-than-1000'); // Or whatever
    }
});

How to get data-attribute value of elements which is greater than given value using jquery?

Use jQuery Has Attribute Selector [name] to selecting target elements and use .filter() to filtering element has data-instno great than 15.

$("[data-instno]").filter(function(){
  return $(this).attr("data-instno") >= 15;
}).doSomething();

$("[data-instno]").filter(function(){  return $(this).attr("data-instno") >= 15;}).css("background", "red");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><input type="text" id="54" data-instno="12"/><input type="text" id="124" data-instno="13"/><input type="text" id="88" data-instno="14"/><input type="text" id="126" data-instno="15"/><input type="text" id="102" data-instno="16"/><input type="text" id="8" data-instno="17"/><input type="text" id="87" data-instno="18"/><input type="text" id="112" data-instno="19"/>

How do I select all classes greater than a value

You can use match() to extract the numbers from the class names and filter() to restrict the set of elements to the subset you want:

var divs = $("div").filter(function() {
    var number = parseInt(this.className.match(/\d+/)[0], 10);
    return (number >= 3 && number <= 7);
});

---

Related Topics