First, select a specific element. In your case, the element has the ID tourmaster-payment-template-wrapper , and you are looking for the attribute data-booking-detail ## that contains the value 7568 #.

#tourmaster-payment-template-wrapper[data-booking-detail*="7568"] + .hide-me {
  display: none;
}

<div class="tourmaster-template-wrapper" id="tourmaster-payment-template-wrapper" data-ajax-url="https://www.domainname.co.uk/wp/wp-admin/admin-ajax.php" data-booking-detail="{&quot;tour-id&quot;:&quot;7568&quot;}"></div>

<div class="hide-me">I should be hidden</div>

You can use CSS to hide a div based on the presence or absence of a specific number in the data-booking-detail attribute. However, CSS itself cannot directly manipulate properties or their values. You need to use JavaScript or jQuery to achieve this functionality.

Here's an example of how to do this using JavaScript:

<div id="book-now-div">Offer: Book Now and Pay Later</div>


<script>
  // Get the data-booking-detail attribute value
  var bookingDetail = document.getElementById("tourmaster-payment-template-wrapper").getAttribute("data-booking-detail");

  // Check if the bookingDetail includes the specific tour ID
  if (bookingDetail.includes('7568')) {
    // Hide the div with id "book-now-div"
    document.getElementById("book-now-div").style.display = "none";
  }
</script>