CSS3 Selectors: An element with an attribute E[attr]

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

E[attr]:

Matches any element E that has the attribute attr with any value.

This is especially good for formatting a form.

We use input[type] for textbox as an example.

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

</head>
<body>

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

</body>
</html>

 

CSS3 Selectors: The ~ selector

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

For this example, we use h2 ~ p.

This is a general sibling combinator.  Both h2 and p are siblings of each other.

It selects a <p> element preceded by an <h2> element.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Codecrawl.com</title>
    <style>
        h2 ~ p {
            font-family: sans-serif;
            color: blue;
            font-size: 125%;
        }
    </style>
</head>
<body>
<article>
    <h1>American Music</h1>

    <p>The different types of music genre in America.</p><!-- Child combinator targets this paragraph -->
    <section>
        <h2>Country</h2>

        <p>Taylor Swift</p><!-- Adjacent sibling combinator targets this paragraph -->
        <p>Carrie Underwood</p>
    </section>
    <h1>Hard rock and metal</h1>

    <p> Nirvana has come to be regarded as one of the most influential and important rock bands of the modern era.</p>
    <!-- Child combinator targets this paragraph -->
</article>
</body>
</html>

Try running the CSS and you can see the 2 lines with the <p> tags that are selected.

CSS3 Selectors: The + selector

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

Here in this example, we use h2 + p.

This is an adjacent sibling combinator.

It selects an element <p> immediately preceded by a <h2> element.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Codecrawl.com</title>
    <style>
        h2 + p {
            font-family: sans-serif;
            color: blue;
            font-size: 125%;
        }
    </style>
</head>
<body>
<article>
    <h1>American Music</h1>

    <p>The different types of music genre in America.</p><!-- Child combinator targets this paragraph -->
    <section>
        <h2>Country</h2>

        <p>Taylor Swift</p><!-- Adjacent sibling combinator targets this paragraph -->
        <p>Carrie Underwood</p>
    </section>
    <h1>Hard rock and metal</h1>

    <p> Nirvana has come to be regarded as one of the most influential and important rock bands of the modern era.</p>
    <!-- Child combinator targets this paragraph -->
</article>
</body>
</html>

CSS3 Selectors: The > selector

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

Here we use article > p.

This is a child combinator and <p> is a child of <article> element.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Codecrawl.com</title>
    <style>
        article > p {
            font-family: sans-serif;
            color: blue;
            font-size: 125%;
        }
    </style>
</head>
<body>
<article>
    <h1>American Music</h1>

    <p>The different types of genre in American music.</p><!-- Child combinator targets this paragraph -->
    <section>
        <h2>Country</h2>

        <p>Taylor Swift</p><!-- Adjacent sibling combinator targets this paragraph -->
        <p>Carrie Underwood</p>
    </section>
    <p>Hard rock and metal</p><!-- Child combinator targets this paragraph -->
</article>
</body>
</html>

Try the CSS3 and you will see that the <p> under <section> is untouched.

CSS3 Selectors: Groups of selectors

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

A comma-separated list of selectors represents the union of all elements selected by each of the individual selectors in the list.

In this example, we condense three rules with identical declarations into one. Thus,

h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }

is equivalent to:

h1, h2, h3 { font-family: sans-serif }
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Codecrawl.com</title>
    <style>
        h1, h2, h3 { font-family: sans-serif }
    </style>
</head>
<body>
<h1>Country Music</h1>
<h2>Taylor Swift</h2>
<h3>Hot Country Girl</h3>

<p> Taylor Swift moved to Nashville, Tennessee, at the age of 14 to pursue a career in country music.</p>
</body>
</html>