CSS3 Selectors: Matches the end of the attribute value

This entry is part 16 of 40 in the series CSS3 Selectors

E[attr$=val]

Matches any element E whose attribute attr ends in val.

In other words, the val matches the end of the attribute value.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>codecrawl.com : start with</title>
    <style>
        a[href$='.com'] {
            color: green;
        }
    </style>

</head>
<body>
<a href='http://google.com'>This is to google</a>
<br>
<a href='http://yahoo.com'>This is to yahoo</a>
</body>
</html>

CSS3 Selectors: Match a substring

This entry is part 17 of 40 in the series CSS3 Selectors

E[attr*=val]

Matches any element E whose attribute attr matches val anywhere within the attribute.

In other words, the string val is matched anywhere in the attribute value.

It is similar to E[attr~=val] above, except that the val can be part of a word. 

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>codecrawl.com : start with</title>
    <style>
        a[href*='hoo'] {
            color: green;
        }
    </style>

</head>
<body>
<a href='http://google.com'>This is to google</a>
<br>
<a href='http://yahoo.com'>This is to yahoo</a>
</body>
</html>

CSS3 Selectors: Pseudo class :hover

This entry is part 18 of 40 in the series CSS3 Selectors

There are a few common pseudo classes such as :link, :hover, :visited, :active and :focus.

They are called pseudo as these elements can’t be targeted using the normal html tag.  For example, the hover example below is actually an action.

Let’s look at the simple hover class where a link could be highlighted to a different color when the mouse is over the link.

:hover can apply to any element on the page—not just links and form controls.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>codecrawl.com</title>
    <style>
        a:hover {
            color: red;
        }
    </style>

</head>
<body>
<a href='http://google.com'>This is to google</a>
<br>
<a href='http://yahoo.com'>This is to yahoo</a>
</body>
</html>

 

CSS3 Selectors: Form control :focus

This entry is part 19 of 40 in the series CSS3 Selectors

The :focus pseudo class is commonly used in formatting a focused input box.

An input box is in focus when the mouse has clicked on it.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Codecrawl.com-Form</title>
    <style>
        input:focus {
            border: 2px solid red;
        }
    </style>
</head>
<body>

Name: <input type='text' name='name'>

</body>
</html>

 

CSS3 Selectors: Combining :focus and :hover

This entry is part 20 of 40 in the series CSS3 Selectors

As a demonstration, we can combine :hover and :focus for a text input box.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Codecrawl.com-Form</title>
    <style>
        input:focus {
            border: 2px solid red;
        }
        input:hover {
            border: 2px solid green;
        }
    </style>
</head>
<body>

Name: <input type='text' name='name'>

</body>
</html>