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

Question

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

Navigation

#1 by (8 votes)
#2 by (1 votes)

3

I have several pages with multiple images and multiple links. But I am migrating from protocol HTTP 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 becomes red, if the image is http it places 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"><!--bordavermelha--><imgsrc="https://imagem.com">   <!-- sem borda -->

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

http html5 css3 https

asked by anonymous 12.08.2018 / 16:51

2 answers

1

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: link

12.08.2018 / 21:37

How to do every time you pass "true", does it print the entire instantiated object? Methods Getters and Setters [duplicate]

score 8 · Accepted Answer

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

[data-foo^="bar"] starts with the set value
[data-foo$="bar"] ends with set value
[data-foo*="bar"] contains the value (regardless of whether it is start, middle, or end)

[data-foo~="bar"] causes the behavior to be similar to that of the class selector, ie "bar" is the value that will be evaluated between spaces, eg

<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 representing languages, as it will look for elements like:
```
<div data-foo="bar"></div>
<div data-foo="bar-baz"></div>
```
That is, it should be exactly "bar" or it should start with bar- , a use with elements indicated in Portuguese (and variants):

Then as I said at the beginning, to get attributes that start with http:// the correct 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">

IfyouuseCSSlikethis:

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

It will be applied to this image, when it should not

Source: link