Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

CSS for beginners – Step 3/3

Sunday, August 3rd, 2014 by Servage

CSS selectors-2

In part 2 of this series, we discussed Class Selectors as a type of CSS selector. In this post, I will wrap up the discussion on CSS selectors by briefly exploring the remaining types.

Unlike class selectors, ID selectors are unique to each page as we never want to duplicate ID tags. These target specific elements in HTML. However, just like class selectors, we must first define ID selectors in the HTML document. We can assign an ID attribute to nearly every HTML or XHTML tag. For instance:

<p id=”margin”>

Or

<div id=”margin”>

Once you define ID attributes in the HTML (above, the next step would be to define ID selectors in CSS. Generally, a hash (#) or pound (£) sign is placed before the ID name. With the above example code, you then place ID selectors on CSS sheet in the following manner:

#margin {

Margin : 10px ;

}

CSS Child Selectors

In HTML, many times we find a hierarchy, where one element may carry other elements. This forms parent-child relationships in the expression of properties. If we then want to implement CSS values on certain elements, which follow the hierarchy, we need to target child elements using child selectors with CSS web programming. This way your CSS properties will affect only targeted child elements, and not all other child elements or the parent element.

The method of child selector coding involves use of a > (greater than symbol). This indicates the parent to child relationship (descendent) and shows, which child is targeted in your child selector coding. For instance, to change the background of a paragraph or a section of the web page, you use body > p, or body > div in your coding:

Body > p { bgcolor : yellow; }

One thing to keep in mind is that you must indicate only a direct descendent of an element, and not any anchor of that element. For example, if you have a list (li) under unordered list (ul), that will become the child. But, if any link is given in the listed content, it won’t become part of the child selector. You need to code the anchor CSS in a way other than using child selector. For example, in the following code:

<ul>

<li><a herf=….>…</a></li>

<li>something else</li>

</ul>

Link tag <a> must never be a child selector.

CSS Adjacent Sibling Selectors

As seen in the above code sample, more than one <li> element can exist under one <ul> HTML element. Covering individual elements for the same style can make for bulky code, with two <li> elements occurring near each other. We can shorten this, or make our code compact, using CSS adjacent sibling selectors in one parent/root element.

To define an adjacent sibling selectors, we use a plus (+) sign between them. Therefore, two <li> elements would be coded as:

li + li {

bgcolor: red ;

}

However, the rules are changed in cases of an ordered list, as only the second and subsequent Li elements are considered adjacent to each other, but not the first one.

Universal Selectors

In our final paragraph here, universal selectors deserve a special observation as they are assigned in a way that is contrary to all specific selectors. Universal selectors affect all elements in the HTML documents. Therefore, in CSS, they are represented by an asterisk (*).

References & More Reading
CSS Introduction
What is a CSS Selector?
CSS Child Selectors

CSS for beginners - Step 3/3, 3.0 out of 5 based on 2 ratings
Categories: Guides & Tutorials, Tips & Tricks

Keywords:

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.