I added a couple of tags in HTML(already linked to CSS):

<img src="../html/img/image1.jpg">

<img src="../html/img/image2.jpg">

and had my CSS coded like:

img[src^="../html/img/"]{
    border: 10px solid black;
}

However, it didn't apply to both tags in HTML no matter how many times I refreshed the web page.

Would you please tell me why my css attribute selector doesn't work? Thank you!

CodePudding user response：

If you want to apply it to both img tags you could just do

img {
    border: 10px solid black;
}

CodePudding user response：

How about this selector?

img[src*="/html/img/"]{
    border: 10px solid black;
}

CodePudding user response：

Try this ... you just select the img not src or other code....

img{
border: 10px solid black
};

CodePudding user response：

Your question is based on the fact that your code doesn't work, but it does:

img[src^="../html/img/"]{
    border: 10px solid black;
}

<img src="../html/img/image1.jpg">

<img src="../html/img/image2.jpg">

<img src="not-bordered.jpg">

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

I suggest your look somewhere else for the problem.