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

Question

I have several pages with several images and several links. However I am migrating from the protocol HTTP to the HTTPS. I would like all images and links that are indexed or linked via HTTP to appear with a red border or text in red.

For example, if the link is http the color turns red, if the image is http 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 I could do this styling of CSS in these elements if they are referenced via HTTP?

Answer 1

The selector src*="http://" is incorrect for this, because the *= indicates that it will fetch in any place of 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 (independent of being beginning, middle and end)

• [data-foo~="bar"] makes the behavior similar to the class selector, ie the "bar" is the value that will be evaluated between spaces, 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="a b c"></div> <!-- NÃO será pego pelo seletor -->
  <div data-foo="a bar c"></div> <!-- será pego pelo seletor -->
  

• [data-foo|="bar"] this selector is used usually to pick up who represent languages, as it will seek elements such as:

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

  I mean, it must be exactly "bar" or should begin with bar-, a use with elements indicated in Portuguese (and variants):

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

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 apply to that image, when you shouldn’t have

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

Answer 2

You can use attribute selectors.

/* elementos <a> onde o href inicia com "http://"  */
a[href^="http://"] {
    color: red;
}

/* elementos <img> onde o src inicia com "http://"  */
img[src^="http://"] {
    border: 1px solid red;
}

Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors