CSS - CSS Attribute Top Selector




 CSS Attribute Top Selector

Learn css - css tutorial - CSS Attribute Top Selector - css examples - css programs

CSS Attribute top selector - Definition and Usage

  • In css top (^)selector is used to select the element containing specified word in the beginning of attribute value.
  • It is used to refer the beginning of value,but whole word should not be the value.
CSS Attribute Top Selector
  • The [attribute^="value"] selector is used to select elements whose attribute value begins with a specified value.

css code - Example

[class^="top"] 
{
    background: yellow;
}
click below button to copy the code. By - css tutorial - team

Sample coding - css html

 Tryit<!DOCTYPE html>
<html>
    <head>
        <style>
            [class^=top] 
            {
                background: orange;
            }
        </style>                     
    </head>
    <body>
       <h1> class="top-header">Welcome To Wikitechy<h1>
       <p class="topcontent">Hai Wikitechy </p>
    </body>
</html>
click below button to copy the code. By - css tutorial - team

Code Explanation - style css

Code Explanation CSS Attribute Top selector
  1. [class|=top] is the [attribute|="value"] selector being used to select elements with the specified attribute starting with the specified value.Here Class is an attribute and top is a value.
  2. Background property with a value cyan displays cyan background for an element.
  3. <h1 class="top-header"> will have the styles specified by [class|=”top”] selector. Since the starting values begins with top keyword. Also text will be displayed in h1
  4. Similarly, <p class="topcontent"> will have the styles specified in the [class^=top] selector.

html css tutorial - Output :

Output CSS Attribute Top selector
  1. The heading text “Welcome To Wikitechy” and paragraph text “Learn To Code” have a yellow background color as displayed in the above web browser as shown.

This page provides a detailed information on css stylesheet , css editor , css generator , css form , css3 tutorial , tutorial css , php css , css tools , html and css , css tags , css basics , css properties , css software , css layout , code css , css tutorial pdf , css version , online css editor , css online , css examples , compress css.


View More Quick Examples

CSS BASICS & SELECTORS CSS SELECTOR ATTRIBUTE CSS STYLE FORMS COLORS & BACKGROUND CSS MARGIN & PADDING CSS WIDTH & HEIGHT CSS LINKS CSS BLOCKS

Related Searches to CSS Attribute Top selector