CSS3 Selectors: Only-of-type

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

:only-of-type targets elements whose parent elements have no other children of the same type.

The <p> tag in <header> is targeted as it has only one <p> tag.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Codecrawl.com - HTML5</title>
    <style>
        p:only-of-type {
            color: blue;
        }
    </style>
</head>
<body>

<article>
    <header>
        <h1>Rod Stewart</h1>

        <p>21.06.2014</p>
    </header>
    <section>
        <h4>Sing It For Us Rod</h4>
        <p>Rod Stewart is one of the best-selling music artists of all time</p>

        <p>Having sold over
            100 million records worldwide.</p>
    </section>
</article>

</body>
</html>

CSS3 Selectors: Pseudo-class :empty

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

:empty can be an extremely useful pseudo-class.

It represents an element with no content.

Imagine we’ve got a dynamically generated list in our page that has no contents; we can hide it using :empty.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Lists</title>
    <style>
        li:empty {
            display: none;
        }
    </style>
</head>
<body>

<h4>British Pop</h4>
<ol>
    <li>Cold Play</li>
    <li>Depeche Mode</li>
    <li>Adele</li>
    <li></li>
</ol>

</body>
</html>


If we remove the empty selector, the last empty item in the list will be displayed.

Lists

CSS3 Selectors: Pseudo-element ::before

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

CSS3 introduced a new double-colon (::) syntax for pseudo-elements to distinguish between them and pseudo-classes.

We use an earlier figcaption example to add a text content to a figure caption.

Note that we are actually inserting content inside the element that we are targeting and in the example below, we are targeting <figcaption>.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Codecrawl.com - HTML 5</title>
    <style>
        figcaption::before {
            content:'Figure: ';
            font-weight: bold;
            color: brown;
        }
    </style>
</head>
<body>
<figure>
    <img src='//codecrawl.com/code/images/ushuaia.jpg' width='300px'>
    <figcaption>Ushuaia, the southernmost city in the world</figcaption>
</figure>
</body>
</html>


 

 

 

CSS3 Selectors: Pseudo-element ::after

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

As with the previous example, we can add a text content using ::after.

.
Another use case for ::after is to insert an attribute of the targeting element.
.
Here we retrieve the href using attr(href) and insert the href link after the text content.
<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Codecrawl.com - HTML5</title>
    <style>
        a[href^=http]:after {
            content: " (" attr(href) ")";
        }
    </style>
</head>
<body>
<a href='http://yahoo.com'>I am going to yahoo!</a>
</body>
</html>

CSS3 Selectors: Negation pseudo-class :not(s)

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

Pseudo-class: not(s)

This is probably the last CSS3 selector that we will look at.

In many ways, it works in reverse to other selectors as it allows you to target elements that do not match the selector’s argument s.

An example here is in styling all form inputs that are not Submit buttons.

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>Quick contact form</title>
    <style>
        input:not([type='submit']) {
            width:250px;
            border:1px solid greenyellow;
        }
    </style>
</head>
<body>
<form>
    <fieldset>
        <legend>Contact information</legend>
        <ul>
            <li>
                <label for='email'>Email:</label>
                <input required type='email' id='email' name='email'/>
            </li>
            <li>
                <label for='tel'>Telephone number:</label>
                <input required type='tel' id='tel' name='tel'/>
            </li>
            <li>
                <label for='url'>Website:</label>
                <input required type='url' id='url' name='url'/>
            </li>
        </ul>
        <input type='submit' value='Submit this' />
    </fieldset>
</form>
</body>
</html>