Tutorials HTML/CSS CSS Selectors

CSS Selectors

Today's tutorial will be how to select different elements with CSS.

CSS Selectors

You can mix and match these to determin what

div Selects all div tags
div#wrapper Selects all div tags with "wrapper" in the id attribute.
div.wrapper Selects all div tags with "wrapper" in the class attribute.
div[title] Selects all div tags with the title attribute.
div[title="slogan"] Selects all div tags with "slogan" in the title attribute.
div p Selects all descendent p tags inside div tags.
div p:first-child Selects the first child p tag inside div tags.
div p:last-child Selects the last child p tag inside div tags.
div p:nth-child(5) Selects the fifth child p tag inside div tags.
div p:nth-child(odd) Selects all odd children p tags inside div tags.
div p:nth-child(even) Selects all even children p tags inside div tags.
div p:nth-last-child(5) Selects the fifth child p tag inside div tags, counting from the last one.
div p:nth-last-child(odd) Selects all odd children p tags inside div tags, counting from the last one.
div p:nth-last-child(even) Selects all even children p tags inside div tags, counting from the last one.
div > p Selects only p tags that are children of div tags.
div + p Selects the first sibling p tag that comes after div tags.
div ~ p Selects all sibling p tags that come after div tags.

Most of these are pretty self-explanatory, so I'll only talk about the last three.

Direct Child Selector

The direct child selector only selects the children of the parent and not any descendents. Let's pretend you have a nested list:

<div class="primary">

    <ul class="primary-list">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
    
    <div class="secondary">
        <ul class="secondary-list">
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
        
    </div>
    
</div>

It's common to only want to target the first level items and leave all the nested descendents untouched. You could apply properties to the whole structure and then reverse them after the first level, but that requires to to code it twice. In this case, you can use the child selector to only select the first level children and not any of the nested ones. This will only affect the primary list but not the secondary list.

div.primary > ul {
  color:blue;
}

Adjacent Sibling Selector

The adjacent sibling selector grabs the first sibling after the previous element.

<p>She sells seashells by the seashore.</p>
<div>Foo</div>
<p>Bar</p>
<p>lolcatz</p>
<p>Hello World</p>

CSS:

div + p {
  color:blue;
}

This will select "bar" as that is the first p tag after a div tag.

General Sibling Selector

The general sibling selector grabs all siblings after the previous element.

<p>She sells seashells by the seashore.</p>
<div>Foo</div>
<p>Bar</p>
<p>lolcatz</p>
<p>Hello World</p>

CSS:

div + p {
  color:blue;
}

This is going to select "bar", "lolcatz", and "Hello World" because they are all sibling p tags that come after a div tag.

That's it for this tutorial. Hopefully this will make it easier to style things without going into JavaScript. See you next time on PHP Trainee.

Posted by on . Category: HTML/CSS


Comments

No comments posted yet

You need to register or login to post new comments.