.0 Decimals In CSS Data Attributes

Question

hoping for some help with the following.

The code needs to hide items depending on the variable entered. For example below is between 4 and 4.9. So the top 2 lines of this code combine perfectly to achieve this, however if the number 4 is entered as 4.0 it applies the variables for decimal numbers.

This is my attempt to have the decimals (.1 - .9) do one thing will have whole number (4) and (4.0) do another.

At the moment lines 2 and 3 of the code conflict and neither works. Any help on how to fix this or a better way to write this code would be appreciated.

Thanks

[data-customer-rating="4"].review-card__stars .review-card__stars__star-o:nth-of-type(n+8) {display: none:}
[data-customer-rating="4."].review-card__stars .review-card__stars__star-o:nth-of-type(n+9) {display: none:}
[data-customer-rating="4.0"].review-card__stars .review-card__stars__star-o:nth-of-type(n+8) {display: none:}
.review-card__stars .review-card__stars__star-half-empty {display: none;}
[data-customer-rating*="."].review-card__stars .review-card__stars__star-half-empty {display: flex;}