Combining Type Selectors

Now that we know that the basic selector is just the type selector it is time to discover how they can be used in combination.

If you have two type selectors T1 and T2 then just writing them one after the other:

• T1 T2 means all T2s nested within T1s.

Putting this another way, all T2s that are children of a T1. For example:

$("div p");

selects all <p> elements that are contained within a <div>. Notice that it doesn't matter how deeply nested the <p> is within other elements. If there is a containing <div> then the <p> is selected.

You can use as many types as you like to define complicated nestings of elements. For example:

$("div div p")

selects <p> elements that are nested within two divs. Notice that this means at least two divs – it doesn't select <p> elements nested within one div but it does select <p> elements nested withing two, three or more <divs>.

You can use the universal selector to define nesting relationships that are independent of type. For example:

$("div * p")

means <p> elements nested within any other element and an outer containing div.

If you simply write type selectors separated by spaces then you are defining nesting relationships. The separators > and + indicate two other types of relationship:

• T1 > T2 means T2 has to be an immediate child of T1, i.e. T2 has to be directly contained within T1. 

So, for example:
$("div > p")

selects all <p> elements that are immediately contained within a div. Compare this to:

$("div p")

which means that the p has to be contained within the div, but there can be other types between it and the div.

• T1 + T2 means that T2 is selected if T2 immediately follows T1, ignoring non-elements such as text and comments. In this context "immediately following" means that T2 isn't nested in T1.

For example:

$("h1 + div")

selects all divs that immediately follow a h1.

The final way to combine type selectors is very simple. You can making a list of selectors separated by commas to mean elements that match any of the selectors. For example:

$("h1, div, p")

selects all h1, div and p elements

As you might expect, you can mix these types of selectors together. It may be obvious that you can do it, but sometimes it can be very difficult to work out what they mean.

For example:

$("div * p > span ")

specifies a <span> that is immediately contained by a <p>, contained by any element contained by a <div>.

The trick in understanding more complicated selectors is to realize that you read them from right to left with the conditions being added to reduce the number of elements selected.

So starting from the right we have span, i.e. pick out elements that correspond to <span>. Next we have p> which adds the condition that the span has to be a child of a <p>, which according to the * has to be a child of some other element and finally the div adds the condition that it has to be contained by a <div>.

If you read the selector from right to left adding conditions as you go you should find it easy to understand the most complex selectors possible.

To summarize:

• The most basic selector is a type selector, T which selects all <T> elements.

• The universal type selector * selects any element.

• T1 T2 selects a <T2> contained in a <T1>.

• T1>T2 selects a <T2 > that is immediately contained, i.e. is an immediate child of, T1.

• T1+T2 selects a <T2> that immediately follows a <T1>.

• T1,T2,T3... selects elements that are selected by any of T1, T2, T3 ...

In book but not in this extract

• Pseudo Classes
• Attribute Selectors
• Class and ID Revisited
• The CSS Pseudo Classes
• Combining Selectors
• Example

Summary

• The most basic selector, the type selector T selects all <T> elements.

• The universal type selector * selects any element.

• T1 T2 selects a <T2> contained in a <T1>.

• T1>T2 selects a <T2 > that is immediately contained in, i.e. is an immediate child of, T1.

• T1+T2 selects a <T2> that immediately follows a <T1>.

• T1,T2,T3... selects elements that are selected by any of T1, T2, T3 … .

• To pick out all of the elements of type T that have a particular attribute you would use T[name].

• [name="value"] select objects with attribute set to "value".

• [name!="value"] select objects with attribute set to something not equal to "value" or which doesn't have the specified attribute.

• [name^="value"] select objects with attribute set to a something that begins with "value".

• [name$="value"] select objects with attribute set to something that ends with "value".

• [name*="value"] select objects with attribute set to something that contains "value".

• [name~="value"] select objects with attribute set to something that contains the word "value" delimited by spaces.

• [name|="value”] select objects with attribute set to something that is value or starts with "value-".

• The one CSS pseudo class that jQuery supports is: T:first-child which selects the first child of type T.

• jQuery lets you combine complete selectors using the rules given for the type selectors.

 Available as a Book:

buy from Amazon

1. Understanding jQuery
2. Basic jQuery CSS Selectors
      Extract: The DOM
3. More Selectors
      Extract: Basic Selectors
4. The JQuery Object
5. Filters 
6. DOM Traversal Filters 
7. Modifying DOM Objects
      Extract: Modifying The DOM 
8. Creating Objects & Modifying The DOM Hierarchy
   
9. Working With Data
      Extract: Data ***NEW!!!
10. Forms 
11. Function Queues
12. Animation 
13. jQuery UI
14. jQuery UI Custom Control
15. Easy Plugins 
16. Testing With QUnit
17. Epilog A Bonus Function

Also Available:

buy from Amazon

To be informed about new articles on I Programmer, sign up for our weekly newsletter, subscribe to the RSS feed and follow us on Twitter, Facebook or Linkedin.

Comments

Make a Comment or View Existing Comments Using Disqus

or email your comment to: comments@i-programmer.info

<ASIN:1871962501>

<ASIN:1871962528>

<ASIN:1871962560>

<ASIN:1871962579>