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

Question:

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="http://google.com">link http</a>     <!-- vermelho -->
<a href="https://google.com">link https</a>   <!-- cor normal -->

<img src="http://imagem.com" >   <!-- borda vermelha -->
<img src="https://imagem.com">   <!-- sem borda -->

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

Answer:

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="http://google.com">link http</a> <br>
<a href="https://google.com">link https</a> <hr>

<img src="http://i.stack.imgur.com/6UVKr.jpg" alt="imagem com http"> <br>
<img src="https://i.stack.imgur.com/6UVKr.jpg" alt="imagem com https">

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

<img src="http://site.com/ptoxy.php?url=https://foobarbaz.com/imagem.jpg">

If you use CSS like this:

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

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

Source: https://www.w3.org/TR/CSS22/selector.html#attribute-selectors

Scroll to Top