CSS Atoms | CSS3 Tutorials, Tips, and Articles » Selectors http://cssatoms.com Thu, 01 May 2014 20:03:32 +0000 en-US hourly 1 http://wordpress.org/?v=3.9.1 Selectors and Declarations in CSS http://cssatoms.com/basic/selectors-and-declarations-in-css/ http://cssatoms.com/basic/selectors-and-declarations-in-css/#comments Thu, 07 Apr 2011 14:17:06 +0000 http://cssatoms.com/basic/selectors-and-declarations-in-css/ In the old days of HTML, there was really not much style added to anything at all. Pages were typically bare and just plain ugly to say the least. Before […]

The post Selectors and Declarations in CSS appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
In the old days of HTML, there was really not much style added to anything at all. Pages were typically bare and just plain ugly to say the least. Before CSS came around, it was common to create an entire page layout with HTML tables. While this can still be done, it should certainly be avoided at all costs. Besides, CSS makes everything so much simpler. You give your HTML elements a Class or an ID, and then you style those elements based on the Class or ID that you’ve given them. Let’s have a look at how CSS works!

STEP ONE:

Understanding the HTML

An HTML page is nothing but a list of elements that will define the structure of your document. It’s a lot like the framework for your page, and determines where in the flow of the document your elements will show up. For our simple demonstration, our HTML page will contain 2 Div elements. Think of a Div as a square. It’s just a container for other elements essentially. Here’s what the basic structure of our demonstration page looks like:

<body>
 
    <div>
    </div>
    
    <div>
    </div>
    
</body>

The 2 Divs are essentially placeholders for any other elements we’d like to place inside of them. Now, let’s take a look at how we can style these Divs using CSS selectors and declarations.

STEP TWO:

Understanding the CSS

A selector in CSS is exactly what it sounds like. Its job is to select an element based on its identifier. We can choose to specify only the type of HTML element, such as Div, or you can specify an ID or a Class to be selected from the HTML page. In practice, this is a lot simpler than it sounds. For example, suppose we wanted every Div element on our page to share a standard background color. Well, the CSS would probably look something like this:

div 
{
	background-color: #09C;
	height: 200px;
	width: 200px;
}

The first thing you’ll notice is the word Div is the selector. We’ve told CSS to select every element on our HTML page that is a Div element, and to change the background color to blue. The background-color: #09C, and the height/width part of the code is the declaration. We’ve declared that every Div needs to have a background color of blue. That’s the power of CSS. We can select anything and everything in a page and style it how we’d like to.

If we load the HTML file up in a browser to view the page, you’ll see both of our Div elements.
Div Elements

However, this could pose a problem. Suppose our Div was a special Div that had its own characteristics. What if our Div doesn’t share any properties with other Divs on our page? Well, we’d need to select only that specific Div from the page, and that would require giving our Div an ID. Since any ID can only be used once per page, this will help make our Div more accessible. Add an ID to the first Div element in the page:

<body>
 
    <div id="firstDiv">   
    </div>
     
    <div>
    </div>
    
</body>

Now, the first Div on our page has an ID of “firstDiv”. Let’s go back into our CSS and create a New Selector and declaration for the firstDiv element:

#firstDiv
{
	background-color: #933;
	height: 400px;
	width: 400px;
}

Do you notice a difference between the Div selector and the #firstDiv selector? The difference is the “#” symbol. This is the ID symbol in CSS. Our selector for the firstDiv element says “grab the element with the ID of firstDiv. Now, only that particular Div will be 400 pixels square, and have a background color of red. Load up the page in your browser to see the difference in the two Divs. The lower, blue Div is being styled based on the fact that it’s a Div element. The red Div is being styled based on the fact that it has an ID of firstDiv.
Div being styled

Ok, so that solves our problem of only selecting a particular element on a page, but yet another problem may arise. Suppose we don’t want to select all of the Divs, but we have a special group of Div elements that need to have a special styling. Well, remember that an ID can only be used on a page once, so we can’t give each Div the same ID. What do we do? Well, CSS also gives us Classes that allow us to select groups of elements based on their Class name. Let’s revisit our Divs and give both of them a Class called “roundCorners”

<body>
 
    <div id="firstDiv" class="roundedCorners">
    </div>
    
    <div class="roundedCorners">
    </div>
    
</body>

So both of our Divs now have a class called roundCorners. Now, we’ll use a CSS selector to select every element that has a class name of roundCorners. Here’s what the CSS Selector looks like:

.roundedCorners
{
   border-radius: 20px;
   -moz-border-radius: 20px;
   -o-border-radius: 20px;
   -webkit-border-radius: 20px;
}

Awesome! So now we’ve selected any Divs on the page that are a part of the roundedCorners Class, and added some rounded corners to them. Simple as pie!
Final Result

Selectors and declarations are the foundations of CSS, and knowing when and how to use them is sure to increase your design muscle. Getting used to using them is essential to building better looking, more user internet friendly web pages. Until next time!

Download Source Files

The post Selectors and Declarations in CSS appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
http://cssatoms.com/basic/selectors-and-declarations-in-css/feed/ 0
Using CSS Attribute Selectors http://cssatoms.com/advanced/using-css-attribute-selectors-2/ http://cssatoms.com/advanced/using-css-attribute-selectors-2/#comments Wed, 30 Mar 2011 19:42:09 +0000 http://cssatoms.com/advanced/using-css-attribute-selectors-2/ A Brief Introduction    In Our last tutorial, we discussed some CSS pseudo-classes and how we can use them to better traverse an HTML document to add styles to elements. […]

The post Using CSS Attribute Selectors appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>

A Brief Introduction

   In Our last tutorial, we discussed some CSS pseudo-classes and how we can use them to better traverse an HTML document to add styles to elements. Today, we’ll be taking the knowledge you’ve garnered and expanding it to new heights by introducing even more perplexing CSS pseudo-classes and selectors. You thought it was only :first-child, :last-child, and :nth-child()? There’s still much more to be seen young grasshopper. Let’s have a look.


Part 1: The HTML

We’ll be using the same unordered list from our last tutorial to begin, and later, we’ll add a few elements to the page to better see the effect of some of our styles. If you don’t have the index.html page from the previous tutorial, you can get it from the downloadable file (recommended) in this tutorial or copy and paste from the following code. Here’s what the initial HTML file should look like:

<!DOCTYPE html>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title> Advanced CSS Selectors </title>
    <link rel="Stylesheet" href="style.css" />
</head>
<body>
    <ul id="theList">
       <li title="first-item"> Item 1</li>
       <li class="shadow huge"> Item 2</li>
       <li class="shadow huge"> Item 3</li>
       <li> Item 4</li>
       <li> Item 5</li>
       <li> Item 6</li>
       <li> Item 7</li>
       <li> Item 8</li>
       <li> Item 9</li>
       <li> Item 10</li>
       <li> Item 11</li>
       <li> Item 12</li>
       <li> Item 13</li>
       <li> Item 14</li>
       <li> Item 15</li>
    </ul>
</body>
</html>

We’ve chosen an unordered list due to it’s semantic nature. It is a parent (<ul>) which can contain plenty of children(<li>). This makes it an ideal candidate for topics like CSS pseudo-classes. Many of them are designed to target specific descendants of other elements as we saw in the previous tutorial. Let’s dive into the CSS.

Part 2: The CSS

The first advanced selector we’ll come in contact with today is called an Attribute Selector. This type of selector will be used to select an element based on a particular attribute the element has. You can use them to match every element that has a particular attribute, but there are also a few tricks up the attribute selector sleeve. There are 6 Different types of attribute selectors:

  • [ att = value ] –> The attribute has to have the exact  value specified
  • [ att ~= value ] –> The attribute has to be a  whitespace separated list of words (i.e., class=”round shadow red”), and one of the words is exactly.
  • [ att |= value ] –> The attribute is exactly the word “value”, or starts with the word “value” and is immediately followed by a ” – “.
  • [ att ^= value ] –> The attribute’s value starts with the specified value
  • [ att $= value ] –> The attribute’s value ends with the specified value
  • [ att *= value ] –> The attribute’s value contains the specified value
So, let’s go ahead and take a look at a few of these in action. We’ve given the first item in our list a title of “first-item”. If we wanted to select all of the elements that had this attribute we’d use the first attribute selector like this:

*[title="first-item"]
{
    color: Blue;
    font-size: 2em;
    font-weight: bold;    
}

Recall that the asterisk( * ) is a symbol that represents all of the elements on the page. We’ve selected all of the elements that have a title attribute equal to first-item.
CSS allows us to have more than one class applied to an element, provided that each class you add is separated by a space. For instance, our second and third list items have a class of “shadow huge”. This is actually 2 classes; shadow and huge. Our second version of the attribute selector makes it a bit more simple to target elements with classes of this nature. Our next example will show how to select any list item with multiple classes where at least one of the classes matches the specified value. In our case, the value will be “shadow”. Have a look:

li[class~="shadow"]
{
   color: #cc5656;
   font-size: 2.5em;
   text-shadow: #999 2px 2px 2px;
}

Now, since our second and third list items each at least the “shadow” class, both will have the styles.
Moving right along, notice that the fourth and fifth items in our list have nearly the same class. The only difference is the last portion of the hyphen. The fourth item’s class is “item-cool”, and the fifth item’s class is “item-hot”. Our next selector is designed to target elements that have a class with a “dash” in it. As long as the value is exactly equal to the specified value or is exactly the specified value followed by a “dash”, the element will get the style. Let’s see how this looks in practice:

li[class|="item"]
{
    color: Green;
    font-family: sans-serif;
    font-size: bold;    
}

Now, even though our fourth and fifth items have slightly different classes, they can both share some similar styling with that simple selector. You should now be able to plug in the final 3 attribute selectors without too much trouble, as they are fairly straightforward.

A Few Last Words

This has been the second installment in our CSS selectors series of tutorials, but we’re not done yet. We’ve been through some fairly advanced pseudo-classes, and also some pretty high-level attribute selectors. The next step is to learn a bit more about structural pseudo-classes, the negation pseudo-class, and pseudo-elements. See you then, and be prepared!

Download Source Files

The post Using CSS Attribute Selectors appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
http://cssatoms.com/advanced/using-css-attribute-selectors-2/feed/ 0
Using CSS Psuedo Classes pt.1 http://cssatoms.com/advanced/using-css-psuedo-classes-pt-1-2/ http://cssatoms.com/advanced/using-css-psuedo-classes-pt-1-2/#comments Wed, 30 Mar 2011 19:41:42 +0000 http://cssatoms.com/advanced/using-css-psuedo-classes-pt-1-2/ A Brief Introduction It’s easy to miss out on a lot of CSS functionality if you’re unaware of the advanced selectors. Things like :first-child, :last-child, and :nth-child can really come […]

The post Using CSS Psuedo Classes pt.1 appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
A Brief Introduction

It’s easy to miss out on a lot of CSS functionality if you’re unaware of the advanced selectors. Things like :first-child, :last-child, and :nth-child can really come in handy in certain situations. Today, we’ll take a look at all 3 of these advanced selectors, and see how they can help us target some hard to reach elements on our page. Ready? Let’s do it.

Step 1: The HTML

We’ll be using a fairly large unordered list to demonstrate some of the capabilities of the advanced selectors. This will give us plenty of elements to traverse, and provides an easy way to see how the selectors work. Here’s the initial HTML page with the list already set up:

<!DOCTYPE html>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title> Advanced CSS Selectors </title>
    <link rel="Stylesheet" href="style.css" />
</head>
<body>
    <ul id="theList">
       <li> Item 1</li>
       <li> Item 2</li>
       <li> Item 3</li>
       <li> Item 4</li>
       <li> Item 5</li>
       <li> Item 6</li>
       <li> Item 7</li>
       <li> Item 8</li>
       <li> Item 9</li>
       <li> Item 10</li>
       <li> Item 11</li>
       <li> Item 12</li>
       <li> Item 13</li>
       <li> Item 14</li>
       <li> Item 15</li>
    </ul>
</body>
</html>

Step 2: The CSS

On to the styles! We’ll start with the :first-child and :last-child pseudo-classes. These, as you may have guessed, take the element that we are referencing as the parent element. In our case, the parent element will be the list with the ID of theList. The element may have several children, in our example, theList has 15 children to be exact. So if we call the :first-child or :last-child, you should expect to see the styles added to the first and last item. Let’s add some styles to the first and last child now:

#theList li:first-child
{
   background-color: #e6fa78; 
}
 
#theList li:last-child
{
   background-color: #c9ff82; 
}

Now, if you load up the page in the browser, you’ll see exactly what you should expect. The first list item is colored a light-yellow, and the last a light-green. The first and last child pseudo selectors have easily allowed us to call out these items and style them.
The next pseudo-class we’ll take a look at is the :nth-child() selector. This selector is great for when you need to style, say, only the odd elements or only the even elements. The number that we pass into the selector will determine which one of the children is to be styled. For instance, if we pass in a “2″, it will style the second child of the parent element. If we pass in “2n”, it will style every second child of the parent element. Let’s style every 4th child in our list:

#theList li:nth-child(4n)
{
   background-color: #ffb8b8;        
}

You could pass in any number you’d like to the nth-child() pseudo-class and CSS will find every one of those numbered children and style them to your heart’s content. Again, this comes in handy when you’d like to have alternating styles for rows in, say, a table, that will make it easier for your visitors to visualize the information.

A Few Last Words

Getting the hang of using the pseudo-classes in CSS will give you an edge above the average web designer. Not only that, but it will help you to keep from using unnecessary classes and ID’s when creating your pages. Join us in our next tutorial, part 2, when we’ll dig deeper into the more advanced selectors in the wonderful world of CSS. See you then!

Download Source Files

The post Using CSS Psuedo Classes pt.1 appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
http://cssatoms.com/advanced/using-css-psuedo-classes-pt-1-2/feed/ 0