Defining element, style, and attribute selectors

Using element selector

CSS uses selectors that you define in a CSS file or style block to identify which elements in a webpage the defined styles should be applied to.

This can be done by specifying the element itself as the selector.

The following CSS is an element selector for the div element:

<head>
<style type="text/css">
    /* ELEMENT SELECTOR FOR THE DIV ELEMENT */
    div{
        height:100px;
        width:200px;
        background-color:#ff6a00;
        color:#ffffff;
        }
</style>
</head>
<body>
   <h2>STYLE USING ELEMENT SELECTOR (DIV)</h2>
    <!-- STYLE USING ELEMENT SELECTOR (DIV)-->
    <div>
        STYLING DIV USING ELEENT SELECTOR
    </div>
</body>

Using class selector

To use a class selector, you define a custom class name in the CSS file.

Any element that has that class assigned to it via the class attribute will have the defined styles applied.

The following CSS code demonstrates the class selector:

<head>
<style type="text/css">
    /* ELEMENT SELECTOR FOR THE DIV ELEMENT */
    .div-1{
        height:100px;
        width:200px;
        background-color:#ff6a00;
        color:#ffffff;
        }
</style>
</head>
<body>
   <h2>STYLE USING ELEMENT SELECTOR (DIV)</h2>
    <!-- STYLE USING ELEMENT SELECTOR (DIV)-->
    <div class="div-1">
        STYLING DIV USING ELEENT SELECTOR
    </div>
</body>

Using attribute selector

Another way to use CSS to select specific elements on the page is to use attribute selection. This is achieved by specifying an element type followed by a specific attribute.

The following Table outlines the attribute selector capabilities

Attribute selector	Description
=	Specifies that an attribute equals a specific value. For example, the URL of an anchor is a specify URL
~=	Specifies a space-separated list of words as the values for an attribute.
^=	Specifies that the attribute has a value starting with the text specified.
$=	Specifies that the attribute has a value ending with the specified text.
*=	Specifies that the attribute has a value containing the specified text.

The following code demonstrates the attribute selector for any elements that have the required attribute specified::

<head>
<style type="text/css">
    /* ATTRIBUTE SELECTOR FOR THE REQUIRED INPUTS */
    input[required] {
        border:1px dotted #ff0000;
    }
        input[required]:hover {
        border:1px dotted #fff;
        background:#ff0000;
    }
</style>
</head>
<body>
   <h2>STYLE USING ATTRIBUTE SELECTOR (REQUIRED)</h2>
    <form>
        <label for="name">Email</label>
        <input type="email" id="name" /><br />
        <!-- STYLE USING ATTRIBUTE SELECTOR (REQUIRED)-->
        <label for="paswword">Password</label>
        <input type="password" id="password" required /><br />
        <input type="submit" value="Send" />
    </form>
</body>

Using the correct selector to reference an element

You need to ensure that you organize your selectors and your elements such that only the desired elements are impacted by the defined styles.

You can use specific selector or you can combine selectors to referring the right element and to obtain the desired CSS applied to it.

The following CSS code demonstrates this:

<head>
<style type="text/css">
    /*USING ELEMENT SELECTOR*/
    article{
        width:200px;
        height:200px;
        border: 1px solid red;
        }
    /*ELEMENT SELECTOR WITH CLASS SELECTOR*/
    article.newest{
        background-color:#ffd800;
        }
</style>
</head>
<body>
    <article>
        <h3>First Article styled using article element selector </h3>
    </article>
    <article>
        <h3>Second Article styled using article element selector </h3>
    </article>
    <!-- SELECTING THE THIRD ARTICLE BY USING THE CLASS -->
    <article class="newest">
        <h3>Third Article styled using article element selector
        <br />and the background using the class="newest"</h3>
    </article>
</body>

Ads Right