Селекторы атрибутов

Они позволяют установить стиль по присутстви определённого атрибута тега или его значения.

Например,выделим рамку текстового поля <input> красным:

input[type="text"]{

border: 2px solid red;
}
<p>linput type="text" id="login" />

<p><input type="password" id="password" />

<input type="submit" value="Send" />
  

В квадратных скобках идет атрибут и его значение. То есть для текстового поля надо установить границу красного цвета 2 пикселя т олщиной сплошной линией.

Селекторы атрибутов можно применять не только к элементам, но и классам и идентификаторам. Например:

.link[href="http://apple.com"]{

color: red;
}

Microsoft | Google | Apple

Специальные символ ^ (крышечка) позволяет выбрать все атрибуты, которые начинаются на определенный текст. Например, нам надо выбрать все ссылки, которые используют протокол https. В этом случае можно применить следующий селектор:

a[href^="https://"]
{
color: red;
}
      

Для определённого текста в конце , используется символ $. Например, нужны все изображения в формате jpg. Мы можем проверить, оканчивается ли значение атрибута src на текст ".jpg":

img[src$=".jpg"]{

width: 100px;
}

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

      
a[href*="rekoshed"]{

color: red;
}

Данный атрибут выберет все ссылки, которые в своем адресе имеют текст "rekoshed".