CSS - Attribute tilt Selector


CSS - Attribute tilt Selector

  • [attribute~="value"] - selects specific elements whose attribute contains the specific value. 

Example :

[title~="wikitechy"]  
{
    border: 5px solid yellow;
}

Sample Code :

<html>
<head>
    <style>

        [title~=wikitechy
        {
            border: 5px solid black;
        }
    </style>
</head>
<body>
    <img
src="http://www.wikitechy.com/img/logo.png" title="wikitechy" width="224" height="162">
</body>
</html>

Code Explanation :


    [title~="wikitechy"] - Selects all title elements whose title attribute contains the word "wikitechy".

    Border property is used to display a border around an element. Here we have applied border for an image. border: 5px solid black represents the border with 5pixcel strength, solid strength and black color respectively.

    In html, <img> tag is used to insert an image into the web page. src defines the source path of an image , and title attribute has a value “wikitechy” with its styles specified in the [title~=wikitechy] of border: 5px solid black.

Output :


    The image wikitechy has a black color solid border , with width of 5 pixels around it as shown in the web browser window.