CSS3 Selectors: ID selectors

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

What makes attributes of type ID special is that no two such attributes can have the same value in a document.

An ID typed attribute can be used to uniquely identify its element.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Codecrawl.com</title>
    <style>
        #city {
            font-family: sans-serif;
            color: purple;
            font-weight: bold;
        }
    </style>
</head>
<body>

<h2>Taylor Swift</h2>

<p>Taylor Swift moved to <span id='city'>Nashville</span>, Tennessee, at the age of 14 to pursue a career in country
    music.</p>

</body>
</html>
Posted in

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: The descendant selector

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

Here we use article p as an example as shown below.

This is a descendant combinator.

We use article p making <p> the descendant 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 CSS and you can see that all the <p> elements are affected.

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 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.