Как обратится к элементу по состоянию атрибута в стилях?

Frontend developer HTML / CSS
1

Мне интересно, можно ли, и если да то как, обратится к элементу у которого определенное состояние атрибута, например ссылки которые открываются в новой вкладке, или что то типо этого)

2

Это можно сделать заключив в квадратные скобки то что вам нужно, например если вы хотите поменять цвет ссылки которая открывается в новой вкладке то выглядеть это будет как то так:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAA VBMVEX///8zMzPhKifCGR7aJiXjKyfBGB7eKCbGGx8lJSXNHyHRISLWJCSfn58rKytycnLDAADeIR4gICCCgoLkIRzMAADSeHrtf33lY2G9AA3s7OwVFRW9vb2RkZGKioq8AADWAADYEBDk5OTtvb399/j23t7dMzLxysr01tfro6JLS0v66enQFhcTExPqnJzjfHxdXV3V1dXgi4vExMTdenvXPz/dbGwAAAA6Ojqnp6fKJyqysrLmp6fKCg84ODjjFAzWcXL0srHvkZDGMDPOV1rJSErGNzvbkJHVVFXOZGbYdXZ1dXXtwMHgPz7kVVPtoqHvjYvtqajjc3KHXveYAAAHNUlEQVR4nO2bCVfaTBSGA60LoBhArIEigQRBg1TRihb43KpUiwv /x/TmTvJJGySg0ml33mf4zlOJjMxD3e2TFBRAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAsI0K7Vq37ga7DWur18YX8bh2dfXjefB1ZVRrVUs86Nv2heW8fzy hTdvJBszsJTNPq4/aVxVfloiTcwHskotTQvKTKOXn20yBTMp4v53Ya42LU WmYS1uZmMH6M1EXto3XGMTdT0eBYuli8KG5vBigYjaZ2P1polOpFoILR6MWiDTfbQbZRztKCBdHUoysrK6kxeO4o4syEE8Pogc LG lkMplv20cZftQ68lu5qvNbf9oeZXdcUZR6XJplWBoEbXicjkQiyQ376D92EIn5rvxc4p/6 BD/Oh4rUYoqvEnqSyBaXrhhJC3SuQOu 9t3XTKZYHg6wbDKTzRmGz4Go VhI8ms8qJhtrlu qvvuo/uvQ/xDsMVPRgtD9RMY uU/k22/lf7ehiGwU/61BEPKZl0k36w9M Mif3w8yiO4diJsYLBr9wy3OuAB66c5 E8912zQoYru5wVg7Ie6WDSjfs2NAI3PKLOd8xS7Rh3Lfuu2dfFTVHjEje2S 3zPYalvcANFe6V3FHsQefMf0XDc78l23BqaHwbNoI33OFiEZagRlpwsnNHxzOm/r2phiUOT6SclDRM6bru9SzpPMMNe kleMOjvGic9NueN5T22UE6nW9tOG12Z39//4y66PkZS2bs 3Vj5DVM7TEGLJ16GrBUs Qa6q9VqzKQFUupRtWyKlffdScn9Rq8oUJzfls5j7kLmkNuy1tvy54dM xkmuaUddZvY7QIak4z1Cn9nd3uN57gY65taI Ull1TlwEzHMX6dgiGhRgt3A6TckFzGIs4tI6FYdKZNddjzjLvpbQmkYZ0YBuuCcOKzrKEoTPZDaiq7ulzNV1cKBRDap4xxV3QtCmCsVjSXaZOMvxWdw1LEw3rI4YSUx TEdJr9V8hGNKCO0aNVCxoaAGeLrR5VHn7nWL4OodhxY4iL2g/KVn2A5O4Wv0pDMOC0yjFgqbMF B53jqp4W5MMzz1GDqtdM1jWB8ztJ50/ZlObtfXPoun3WY2e0eJE7pc/XsYhkf2uGIvaL6mnXlRPFv5Mcz6MmzozslX56SVjceztHdhZMMzFI9QckHD26sYcmgddxCgYclpmyxgpWfhlUjUT3hKjDUhGdLaVC5oaGzlixwlR4a5qYYJiTTkB7bhWsI2ZBKOIUvRhNHsJkTkOtzw1CmWSKyFY/hVBNFe0LzHMDFseOLcelYaZqWhMWxohWlID/dyQfPuGGaFYd0TQ9uwO2Y4yDI8hiG1UuUs4tmheXcMbUNfMawYjKprGFIMRUdMZt5t MNrmBg3HI hizBMhGTIb1vu0MDQNYxLpCFLS8O4Y8jOjxnGxw35hf4Jw/gbhiw1bEj9kOj8i4bd2YadrIQuFM7Ke07Dk24ghvEh/qeGXU8Mfy6QYXOCYdxjGPdr2G0qpmlWSFGsbxbEsPe24d0sww4ZqmSoOGNp/fIvGJJDxjVUphjuqTNj DDT0OAx7LmGwjZkQ/6CRjwL025xXhrSwnxDPhUbnkFCnWiokkSFfRIqGfKoq7SNwPqwcKmp3mKObciGYlvRaZvCNeNsU 24Lxz76qpEGrJ0XKX0rapuKeLW2XkyNNSuekt5p/XVuEj9YHm0tVGlywnbkA1paziyf1Rez8v3UrRwjR2XN g5SxjWphiuCsPaQ18ZMVQqzaZ4tXXLCopoms0TscXY7HouFLLhDu3bpPP0iwYaeysnnU5GktLQmmo4/IbMYyjhVbtDG/imuJoa0reGhg1Nd7s0khZPxW17oyN5tiP7oTLBcPguzeawYd/5eyL8Q5/EZXd1wqcTkqFSztvbGpG8/Yo/1xJPkGfmuRxLlZspMXTGQyv MGzYu7f/wC Nl4tr7jcvmvbHpYYjqKy38vl8y32/nTs8iDHSafk2sdBixwcZUbQlXqPea15DNmnbMbR9OyqbLVguD5jaZymlp96R04MTfbUnumXt1sm5C8kwV Z432 XzwuF9WNPxlGhcJ5zilLfVBqeZtpVOVL45vKeH2kylxIaG2f5ma6n2s3l5U9NdT4rbSskw/moegxH0TS/ZzRvRliTxZyw4e9TwKgL9l3hn1MDNS83H600QrUYdAgXq5EqPIiBCmqLFkLWE7Uge JqcfG I6xYmrYcFFpxAb/nzaJ4W1z9tLwcwE/xZgEjSPTvisWiRs11nsjx7qexK/xYuEHGg2V0tu5vl4tetLcYKrl8d7 1ZyzYPDgF06zUan2j0 n0er3m1jSa7CwrY/RrtYr5b/zfEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/hp/AF6QU4H/AMnNAAAAAElFTkSuQmCC" title="youtube image" width="150" height="113">



<a href="https://www.youtube.com/" target="_blank">Yotube link in new blank

<a href="https://www.youtube.com/">Youtube link in this blank

a[target] {

    background-color: #c461ff;

}



[title~=youtube] {

    border: 10px solid green;

}

В данном примере у нас есть изображение с title youtube, две ссылки, одна которая открывается в новом окне с помощью атрибута target, другая же которая открывается в этом же окне без данного атрибута, это html код, теперь в css у нас есть два стиля, первый стиль 

a[target]

Придает изменения всем ссылкам у которых есть данный атрибут, запустив данный пример у себя ты в этом убедишься)

В следующем стиле мы проверяем наличие атрибута title у которого есть значение youtube

[title~=youtube]

Если тайтл с таким текстом существует то к нему применяются соответствующие стили)

Данный вид селекторов кстати может быть удобен при создании стилей для форм)

P.S сори за такую ссылку в фотке)