Tuesday, February 7, 2012

CSS Basics - Advanced CSS selectors (Part 2)


Universal Selectors

These selectors as mentioned above, select every element on a page and apply the styling properties. As for instance, the following rule says that every element on the page will be given a solid 1 pixel black border

* {
border: 1px solid #000000;
}

Attribute Selectors

These selectors allow selecting elements based on attributes they contain. For example, the following selector shows that you can select every img element with an alt attribute.

img[alt] {

border: 1px solid #000000;

}

By using the above selector, you will be putting a black border around any image that has an alt attribute.

Selecting attributes becomes more useful if you can select them by attribute value instead of just attribute names as given in the example below:

img[src="alert.gif"] {

border: 1px solid #000000;

}

You may think that this is not that useful but it can be useful when it comes to debugging. CSS 3 now introduces three new types of attribute selector that can select based in text strings in attribute values.

Child Selectors

One can use a child selector for selecting specific elements that are children of other specific elements. As for example, the following rule will turn text of strong elements that are children of h3 elements into blue but will cause no effect on other strong elements.

h3 > strong {

color: blue;

}

(Note: Child Selectors are not supported in IE 6 and below)

Descendant Selectors

Similar to child selectors, descendant selectors however only select direct descendants. These selectors select only suitable elements from anywhere in an element hierarchy, not only direct descendants. Look at the following HTML snippet.

<div>
<em>hello</em>
<p>In this paragraph I will say
<em>goodbye</em>.
</p>
</div>

The div element is in this snippet is the parent of all the others. It has two children, em and p. The p element has another single child element, another em.

A child selector can be used to select just the em immediately inside the div as:

div > em {

...

}

But if you use a descendent selector, as give below:

div em {

...

}

Both em elements would be selected.

to be continued... visit back for more or visit Oglacs, the software development company.

3 comments:

Software Development in Australia Blog said...

wow! this is great script! can someone find me its source please.

Attiqa Shad said...

Rubber pad flooring is gaining popularity nowadays because it's a good replacement floors which is also economical. Rubber mat flooring

serviced apartments in koramangala said...

Princess Square in Koramangala - Serviced Apartments in Bangalore

With over 40 years of experience in the Service Industry all of us at princess square Service Apartments personally know caring for the guest and It is our goal to make sure you, your family and friends the guest enjoy a carefree vacation or Superior business class experience.

We have a small quality driven collection of hotels & hotel apartments within one of the world's most modern and fastest growing city of Bangalore.

Welcome to the Garden city - Welcome to Princess square Service Apartments Hospitality, where our promise of pure value, pure quality and pure service is delivered.

An essential attribute of all our properties are our convenience and central locations within the city of Bangalore.

At princess square Service Apartments we provide a wonderful choice. Whether you are a discerning budget traveler or just looking for that element of luxury of a 5 star business hotel, we have the accommodation solution to suite you.

Our deluxe hotel apartments offer a choice of both full hotel service operations as well as self catering facilities. We have an extensive choice of accommodations to choose from and our portfolio includes standard hotel rooms, deluxe hotel suites, studios, One, Two & Three Bedroom suite apartments, Royal Suites, Executive & Privilege Floors.

We are ideal for leisure, corporate travelers, stopovers & long stays.

All our hospitality establishments provide only the highest levels of comfortable quality accommodations and we are the perfect choice for your next city break, business meeting or special family occasion.

Post a Comment

 
Design by Wordpress Theme | Bloggerized by Free Blogger Templates | JCPenney Coupons