html5 – How to style links and images that are referenced in HTTP and not HTTPS?


I have multiple pages with multiple images and multiple links. But I'm migrating from the HTTP protocol to HTTPS . I would like all images and links that were indexed or linked via HTTP to appear with a red border or red text.

For example, if the link is http the color is red, if the image is http it puts a red border:

<a href="">link http</a>     <!-- vermelho -->
<a href="">link https</a>   <!-- cor normal -->

<img src="" >   <!-- borda vermelha -->
<img src="">   <!-- sem borda -->

How could I do this CSS styling on these elements if they are referenced via HTTP?


The src*="http://" selector is incorrect for this as the *= indicates it will search anywhere in the attribute , the correct selector to use would be ^= , CSS2.1/2.2 selectors for attributes are as follows:

  • [data-foo^="bar"] starts with the defined value
  • [data-foo$="bar"] ends with the defined value
  • [data-foo*="bar"] contains the value (regardless of beginning, middle and end)
  • [data-foo~="bar"] makes the behavior be similar to the class selector, ie "bar" is the value that will be evaluated between spaces, for example:

     <div data-foo="foo bar baz"></div> <!-- será pego pelo seletor --> <div data-foo="foo bar bar"></div> <!-- será pego pelo seletor --> <div data-foo="bar foo baz"></div> <!-- será pego pelo seletor --> <div data-foo="abc"></div> <!-- NÃO será pego pelo seletor --> <div data-foo="a bar c"></div> <!-- será pego pelo seletor -->
  • [data-foo|="bar"] This selector is generally used to pick up which represent languages, as it will look for elements like:

     <div data-foo="bar"></div> <div data-foo="bar-baz"></div>

    That is, it must be exactly "bar" or it must start with bar- , a usage with elements indicated in Portuguese (and variants):

So as I said at the beginning, to get attributes that start with http:// the correct thing would be to use ^= like this:

a[href^="http://"] {
     color: red;

img[src^="http://"] {
     border: 1px solid red;
<a href="">link http</a> <br>
<a href="">link https</a> <hr>

<img src="" alt="imagem com http"> <br>
<img src="" alt="imagem com https">

Now imagine that your image has a dynamic URL like this:

<img src="">

If you use CSS like this:

img[src*="https://"] {
     border: 1px solid red;

It will be applied to that image when it shouldn't


Scroll to Top