CSS Selector with specific CSS attribute

Question

I have an html page:

CSS

#id2{background-image:url(b.png);}

HTML

<div id="id1" style="background-image:url(a.png);"></div>
<div id="id2"></div>

I want to select div with CSS attributes: background-image. For the div1, I can do:

div[style*='background-image']{....something....}

How can I do similar with div2? I want something looks like this:

div[background-image]{....something.....}

In my case (due to some reasons), I cannot use the ID or Class name. My question is:

In html page, there are many divs. Some divs were set background-image in style property, some divs were set background-image in CSS file, some divs were set background-image in style tags. I want to select all div that we set background-image.

In html page, there are many divs. Some divs were set background-image in style property, some divs were set background-image in CSS file, some divs were set background-image in style tags. I want to select all div that we set background-image. — Freelancer
– Freelancer, Commented Feb 14, 2018 at 6:43
I don't think there is a pure CSS solution. But it can be achieved with Javascript — Jacob Goh
– Jacob Goh, Commented Feb 14, 2018 at 6:45

Carl Binalla · Accepted Answer · 2018-02-14 07:01:13Z

2

Don't know if this is enough, but you can somehow do something using jQuery

if ($("#id2").css("background-image") != "none") {
  alert('present');
  //do something if present;
} else {
  alert('absent');
  //do something if absent;
}

#id2 {
  background-image: url('https://s7d1.scene7.com/is/image/PETCO/cat-category-090617-369w-269h-hero-cutout-d?fmt=png-alpha');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="id2">aw</div>

The problem with this is if you just use url(), it will still show "present", although I haven't seen any background-image that uses only url(). And if you want to know why I used none as comparison, you can try alerting $("#id2").css("background-image").

Javascript Style

var someElement = document.getElementById("id2");
var currentBackgroundImage = someElement.currentStyle ? someElement.currentStyle.backgroundImage :
                              getComputedStyle(someElement, null).backgroundImage;

if (currentBackgroundImage != "none") {
  alert('present');
  //do something if present;
} else {
  alert('absent');
  //do something if absent;
}

#id2 {
  background-image: url('https://s7d1.scene7.com/is/image/PETCO/cat-category-090617-369w-269h-hero-cutout-d?fmt=png-alpha');
}

<div id="id2">aw</div>

edited Feb 14, 2018 at 7:01

answered Feb 14, 2018 at 6:49

Carl Binalla

5,4315 gold badges30 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Freelancer Over a year ago

Do you know how to write the code bellow in Pure JS: $("#id2").css("background-image") != "none". I don't want to use any library, because increase my addon size.

Carl Binalla Over a year ago

Added a javascript version

Tushar Acharekar · Accepted Answer · 2018-02-14 06:56:00Z

You can't do this with only css, you have to use javascript or jquery. here for you css() in jquery is useful

please see below example.

<!DOCTYPE html>
<html>
<head>
<style>
#id2, #id3{background-image:url(b.png);}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
       var alldiv = $('div');
       for (i=0;i<alldiv.length;i++){
          if($(alldiv[i]).css("background-image") != "none"){
            $(alldiv[i]).css("background-color","green");
          }       
       }
    });
});
</script>
</head>
<body>

<h2>This is a heading</h2>

<div id="id1" style="background-color:#ff0000">This is a paragraph.</div>
<div id="id2" style="background-color:#ff0000">This is a paragraph.</div>
<div id="id3" style="background-color:#ff0000">This is a paragraph.</div>

<button>Return background-color of p</button>

</body>
</html>

Edit: applying to all div

Pravin Vavadiya · Accepted Answer · 2018-02-14 06:56:15Z

1

You can do this using CSS selector and some jquery function. Not possible with only CSS selectors.

if($('#id2').css("background-color")){
    $('#id2').css('color','red');
}

div[style^="background-image"]{color:red}
#id2{background-color:green}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="id1" style="background-image:url(a.png);">test content</div>
<div id="id2">Test content</div>

answered Feb 14, 2018 at 6:56

Pravin Vavadiya

3,2071 gold badge19 silver badges34 bronze badges

Comments

Jacob Goh · Accepted Answer · 2018-02-14 07:01:46Z

0

This is a way to do it without jQuery, using vanilla Javacript.

Use window.getComputedStyle to get the element style and check if its background-image is none, 1 by 1. Add a class has-bk-img to those who have background image, and then set your CSS to the class has-bk-img.

var elems = document.querySelectorAll('div');

elems = Array.prototype.slice.call(elems);

elems.map(function(el) {
  var styles = window.getComputedStyle(el);

  var bkImg = styles.getPropertyValue("background-image");

  if (bkImg !== "none") {
    el.classList.add("has-bk-img");
  }
})

demo: https://jsfiddle.net/whrz7976/11/

answered Feb 14, 2018 at 7:01

Jacob Goh

20.9k5 gold badges57 silver badges75 bronze badges

Comments

Ajeet · Accepted Answer · 2018-02-14 06:48:05Z

-3

Select the div without class and id

div:nth-child(1) {
    background: red;
}
div:nth-child(2) {
    background: green;
}

<div id="id1">div1</div>
<div id="id2">div2</div>

answered Feb 14, 2018 at 6:48

Ajeet

2862 silver badges5 bronze badges

Collectives™ on Stack Overflow

CSS Selector with specific CSS attribute

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related