Combining Selectors - CONTENT

Combining Selectors

Now that you're familiar with how to use selectors in CSS rule sets including type selectors (HTML element names), class selectors and id selectors, we can move on to learning about other kinds of selectors to open up more complex and useful targeting possibilities.

The syntax for ID selectors created in style sheets is simply a "#" sign followed by any name you like. Its style declarations are then applied to the HTML element you wish to target by inserting the id attribute. Hence if you wanted to apply styles to one and only one top level heading element on a web page, you could define the ID in your style sheet as, say, #TopHeading and then you would insert the id="TopHeading" attribute/value pair in an <h1> tag. 

The following is an example of a web page using an embedded stylesheet and an ID selector:

So why would I want to use an ID when I could just use a class and make the style declarations reusable in other elements, you may ask? 

Well here's a few reasons:

• IDs allow you to get very specific about which elements your styles are applied to. This is largely a matter of staying organized and can also help a great deal once you start creating more complex CSS selectors.
• The ID attribute has a distinct advantage over the class attribute in that it automatically creates the equivalent of a named anchor that can be targetted with a hyperlink using a fragment identifier... (*chuckle*... yeah okay that was a lot of techno-speak there...) 

Let's put that another way. Using the above example, the h1 element using an id="TopHeading" attribute/value pair can be targetted with the following hyperlink:

• Once you start breaking into Javascript and DHTML, you'll see how using ID selectors can help create dynamic web page effects.

Until you find your bearings with CSS, you should mainly stick with class selectors.

However, before you start writing up a bazillion classes (and IDs) to target every last HTML element on your web page, you'll want to know how to combine selectors to make for more advanced targetting possibilities.

SOURCE: http://www.ironspider.ca/adv/basic_css/id.htm
_______________

What are all the various ways of combining CSS selectors?

Combining selectors is mainly needed because you want to combine or group the properties each element will receive from the CSS. i.e. there is little to no reason to combine selectors if the properties assigned to the element are not needed - it's mostly about combining properties and less so about selectors.

Anyway, you asked about selectors, so lets address those.

Combining selectors can be done through these methods:

1. Selector grouping
2. Using combinator selectors
3. Using broader selectors
4. Using the cascade
5. Markup changes

1. Selector grouping

One of the simplest ways to combine selectors is to group them, you can do this by using a humble comma, applying the same properties to all the selectors in the group. e.g.

...becomes...

All the matching properties are now applied via both selectors.

2. Using combinator selectors

You could also start to make your selectors more broad, by using looser selectors such as combinators.

Given the following HTML:

Instead of using very specific selectors such as:

... you could use, for example, the descendant combinator to group all the common properties:

... and then staying specific for the unique properties:

3. Using broader selectors

The easiest way to apply a whole series of properties to any element in document is to use the Universal selector, or wildcard selector.

It looks like this:

That's not really good for our document, because it's being applied to elements that don't necessarily need zero margins or padding. Like other selectors, the universal selector can be applied with a combinator, as such:

...which will basically strip any margin or padding off elements scoped within a <nav> element.

There are other selectors that work in a similar (albeit less broad) fashion, such as:

• Element or Type selectors
• Class selectors
• Attribute selectors
• Pseudo-classes

You could also invert your grouping by exclusion using the CSS3 pseudo-class selector: :not()

4. Using the cascade of properties

The most powerful way to group properties is by using the Cascade and inheritance. 

By defining low-level selectors such as:

...we're essentially setting the foundation for all <ul> elements in the document. We can then override this new default by applying more specific selectors later such as:

This is the basis for a reset stylesheet. Essentially, this technique will save you many hours of typing out properties, but you will need to spend more time writing careful selectors and trying not to worsen your specificity scores for each element.

Note: Set your own defaults. If you don't know what your own defaults will be, then use normalize.css rather than reset.css

5. Using markup changes

The often overlooked way to group properties or selectors is by applying markup changes. This practice is the basis for "Object-Orientated" CSS such as OOCCS, BEM, and SMACSS. The primary way to achieve this is by grouping properties in class selectors, and then applying those class values to the document.

Here's a rudimentary example...

Here, I've created a grouping class selector that 'strips' off all the margins and padding from an affected element.

I would then go through my document and apply that class value to elements I want to be stripped of their margins and padding:

Using this technique is limitless in its scope and power, but you'll spend a lot more time making markup changes through-out your site.

SOURCE: https://www.quora.com/What-are-all-the-various-ways-of-combining-CSS-selectors