To preface this article, I’d like to explain the basic logic behind CSS in how it relates to HTML.  So, CSS (aka Cascading Style Sheet) is the language that visually manipulates your text objects in your browser, i.e, your HTML.  To accomplish this, your CSS selects the object by some sort of identifier, then tells it what do, or how to look.

In this post I will show you just about all the CSS selectors there are – some that are pretty common, and others you may not have known existed.

HTML Tags

You can manipulate the way a specific type of HTML tag appears, or get really specific.

For example, if you want to style all your paragraph, or p tags, in your CSS, just type:

[css]
p {
font-size: 14px;
color: #000;
}
[/css]

This will make all paragraph, or p tags have a font size of 14px, and be black. In general, you would want to call individual HTML tags to create a default style for that element.

Classes

Let’s say you want some of your paragraphs to have blue text. In the case where some HTML elements would need to be styled differently than default, you would use classes, both in your HTML and your CSS.

For example, your HTML might be:

[html]
<p>This is a normal paragraph.</p>
<p>This is also a normal paragraph.</p>
<p class="blue">This paragraph has blue text</p>
<p class="blue">This paragraph is also blue</p>
<div class="blue">
<p>This paragraph will be blue, because its container has the class</p>
</div>
[/html]

And your CSS:

[css]
.blue { color: blue; }
[/css]

As you can see, even container classes can overwrite default classes. That’s the great thing about classes, you can use them multiple times on any element.

ID’s

Another basic selector is the ID attribute. In HTML, you can identify an element that is intended to be completely unique in some way – hence identifying the element by giving it a unique name. Remember, in HTML, ID names are intended to be unique – no ID should be the same in one page.

At any rate, you can style elements with unique IDs in CSS like so:

[html]
<div id="myDiv">
<p>My Text</p>
</div>
[/html]

[css]
#myDiv {
width: 200px;
height: 200px;
padding: 20px;
}
#myDiv p {
font-size: 18px;
}
[/css]

See that? You can uniquely style HTML elements based on what element they sit in. In the example above, not only did I style the #myDiv element, but I styled the paragraph inside it. The same identifier rules apply for outer and inner elements, and you can be as specific as possible, for example:

[html]
<div id="myDiv">
<p>This is my <span class="blue">blue</span> text!</p>
</div>
[/html]

[css]
#myDiv p .blue {
color: blue;
}
[/css]

Now the text within the span tag that has the “blue” class inside the p tag inside the div named “myDiv” is now blue. Crazy specific!

BUT WAIT, THERE’S MORE!

States

Let’s talk links, or our a tags. Links have different states other than the default: :link, :active, :visited, :hover. I’ll go over all these states at some point, but for time’s sake, let’s tackle one of the most common, the :hover state. The :hover state changes the element’s default style when you hover over the item with your mouse cursor. In CSS, this would look like this:

[css]
a {
color: #000;
text-decoration: none;
}
a:hover {
color:#333;
text-decoration: underline;
}
[/css]

Quick note: another cool thing about :hover is it can be applied to other elements, p tags, div tags, etc.

There are other states for forms, such as :checked, :disabled, :enabled, :empty, :focus, :in-range, :out-of-range, :valid, and :invalid. For paragraphs, there is :lang(en) – of course ‘en’ would be replaced with whatever the ‘lang’ attribute is set to in your paragraph.

Attributes

The above CSS selectors are all pretty common; however, were you aware that you could select HTML elements based on their attributes?  Let’s use links as another example

[html]
<a href="/index.html">Home</a>
<a href="/pictures/">Pictures</a>
[/html]

[css]
[href="/pictures/"] {
color: #333;
}
[/css]

This could also come in handy with forms, where you would use the same input element with a different type attribute.

When dealing with attribute selectors, there are different ways to select elements based on the contents of their attributes:

[css]
//The "target" attribute is equal to "_blank"
[target="_blank"] {
color: #333
}

//the "alt" attribute contains the word "people"
[alt~="people"] {

}

//the "alt" attribute either equals "people", or begins with "people-" and another word
//for example alt="people" or alt="people-person"
[alt|="people"] {

}

//the alt attribute begins with or equals "people", either as a single word or on its own
//for example, alt="people" or alt="people person" or alt="peopleperson" etc.
[alt^="people"] {

}

//the alt attribute ends with the word "people" either as a single word or on its own
//for example alt="hard working people"
[alt$="people"] {

}

//the alt attribute contains the word people either as a single word or on its own
//for example alt="these are some people standing around"
[alt*="people"] {

}
[/css]

Child Selectors

In CSS, you can select an element based on how many there are, or the order they are in within a containing element. These are known as child selectors. With these, the index, or the order you count them in, begins with “1” For this example let’s consider the html of this list:

[html]
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
<li>Fifth</li>
</ul>
[/html]

[css]
//the following are selected based on the order in which they are listed within the ul tag
//selects the first li element within the list
li:first-child {

}

//selects the last (Fifth) li element within the list
li:last-child {

}

//selects the Second li
li:nth-child(2) {

}

//selects all "even" li’s, for example the second, fourth, and so on
li:nth-child(even) {

}

//selects all "odd" li’s, for example first, third, fifth, and so on
li:nth-child(odd) {

}
[/css]

Select by order or position

To continue this, using the same HTML list, you can also select elements based on the order they’re listed. With these methods, the index begins at “0”, not “1”. These are also global, meaning they will effect ALL specified html elements regardless of their container, unless specified. For example

[css]
//selects the First li
ul li:eq(0) {

}

//selects all li’s that are NOT the Second li
ul li:not(:eq(1)) {

}

//selects all li’s after, or "greater than" the First li
ul li:gt(0) {
}

//selects all li’s before, or "less than" the Third li
ul li:lt(2) {

}
[/css]

Sibling Selectors

Sibling selectors are ways to select elements based on how they are related to another element.

[css]
//selects the span element directly after an img element
img + span {
}

//selects all p elements within a div
div > p {

}

//selects all p elements in the same container as an element with the id of "hello"
#hello ~ p {

}
[/css]

Select All

To select ALL elements within an html document

[css]
* {

}
[/css]

Final Thoughts

It is important that you use valid HTML and define your doctype in your HTML document. It is also important – especially when using sibling and child selectors – to make sure that you can support YOUR audience’s browsers. A great way to do this is by visiting http://caniuse.com/ or use a JavaScript fallback.[/az_column_text][/vc_column][/vc_row]