Cascading Style Sheets (better known as CSS) is the element behind every website which gives it style and design. Through CSS you are able to set anything from font size and style, to animating the direction and speed a page or menu item loads on the page. Paired with HTML5 we are now seeing some amazing ways to go about coding some of the tasks we used to find difficult to complete before. With the introduction of the new standard for style sheets, CSS3, we are given a lot more flexibility in the code we can write. Here is a list of the most useful CSS selectors available, and how they can help you design a better website.
Type Selector
[css]h3 {color: red;
}[/css]
This is the most fundamental selector call, as it applies to every h3 tag within the document.
Descendant selector
p h3 {
color: red;
}
A descendant selector is targeting an element within an element. For the example above, you are stylizing only the h3 tags that appear within a paragraph tag. This will not alter any h3 tags found outside p tags, so this is a useful tip for getting very particular in your design.
Generalized Selector
* {
Margin-bottom: 5px;
Margin-top: 5px;
}
The * symbol denotes that every element on the page will be stylized accordingly. This is useful from a developers end when you’re working on the design and overall layout of a page, however it should not be used on live pages as it gives the browser a heavy set of instructions when compiling your page.
#main_Page *{
border-color: Yellow;
}
This is using the * with child selectors, so that it stylizes all elements within a container. Again this is useful for preliminary design phases, but should be edited out when the page is to be posted online.
Class selector
.login {
color: green;
}
The use of a period in front of the selector is denoting the selector as a class. This differs from the use of a hash symbol (#) which declares an id selector, because a class can target multiple elements. If you have a group of elements you wish to stylize, use a class, if there is an element within the group you want to further stylize, use an id.
:link Selectors
a:link { color: black; }
a:visited { color: red; }
The :link pseudo-class is used when you want to add style to your links on the page. Through the visited tag you can specify the look and feel of the link after it has been clicked by the user.
Adjacent Selector
h1 + p {
Margin-top: 15px;
}
This targets only elements that appear after the first element identified in the selector statement. For the case above, only the paragraph that follows directly after the h1 tag will be stylized with a top margin.
Sibling Combinator
h3 ~ p {
Margin-top: 10px;
}
The use of a ~ symbol is similar to the adjacent selector defined above, however it follows less strict rulings. This will apply to any paragraph as long as it is after an h3 tag.
Direct Child Selector
Div#menu > ul
{
Border-color: green;
}
Using a X > Y call will target all the ul elements directly under the #menu id, but not on any elements within an element. So if you have an unordered list under a menu div, but one of your elements within the ul is another ul containing more list items, then the green border (previously defined) will not apply to the nested li.
Checked Selector
input[type=checkbox]:checked {
Color: red;
}
The checked selector will stylize an element that has been checked by the user. Elements such as a radio button or checkbox will be effected by this.
Hover Selector
p:hover {
color: blue;
}
This is another obvious class attribute, which interacts with the user control. The style will be applied when the user hovers over the paragraph.
Attributes Selector
p[title] {
Background-color: purple;
}
This selector will stylize any paragraph tag that has a title attribute. This is a very generic attribute call as it will encompass any p tag that has a title defined.
Defined Attribute Selector
a[href=“http://www.amortech.ca”] {
background-image: ulr(‘http://amortech.ca/images/logo.png’);
}
This is a defined attribute selector call, which targets all anchor tags which link to Amortech Design Labs home page. This method is further defined in the next selector statement.
a[href*=”Amortech”]{
background-image: ulr(‘http://amortech.ca/images/logo.png’);
}
Like the previous call, this encompasses any anchor that links to anything Amortech. This is the safe way of implementing an attribute selector, as it will style any anchor linked to Amortech.ca even if it’s not linked to the entire url as specified in the previous example.
a[href^=”http”] {
color: blue;
}
In this example, the use of a carat (^) denote to css to search the start of the link to contain the string http. This will stylize all links, which allows for a more uniform look and feel to a page.
a[href$=”.jpg”] {
Padding: 5px;
}
Opposed to the carat which searches from the start of the string, the $ is used to reference the end of a string. This selector statement will add a padding to any anchor which links to a url ending in .jpg.
Custom Attribute Selectors
a[data-filetype=”image”] {
padding: 5px;
}
This is another very useful tip when trying to handle all the different file extensions. For the example of an image, the file extensions range from .gif, .jpg, .png. Instead of creating multiple selector statements (as outlines in the previous examples), we are now able to simply define a filetype to be stylized. For the above code to be called from the HTML file, one must simply include a ‘data-filetype=”image”’ to the anchor tag.
a[data-info~=”image”] {
color: green;
}
a[data-info~=”amortech”] {
color: #FF8D00;
}
The tilde (~) in this example will check the list of information defined in the data-info attribute for any anchor tag. The tilde will separate the list by spaces, and return the value to check for specific styles. To call both these attributes, one would supply the anchor tag with ‘data-info=”image amortech”’.
N’th-child Selector
li:nth-child(5) {
font-size: 14px;
}
This is one of the more interesting attributes, since it allows you to target specific elements in a stack. In the example above, the style will be set to the 5th list item in the stack. The count is not zero-based, so to target the first line, simply call li:nth-child(1).
ul:nth-of-type(3) {
Color: red;
}
Similar to the previous example, this targets the element type. The style will be applied to the 3rd ul element found on the page.
ul li:first-child {
border-top: none;
}
ul li:last-child {
border-bottom: none;
}
These target the first and last element within the ul. This is handy for designers, for instances such as your designing a vertical menu which has a top and bottom border to each element to give it a indentation look. If the top and bottom elements have these border attributes on them, the menu list will have an odd look to it. This will simply target the first and last element, and remove any styling that is applied to it.
First-Of-Type Selector
p:first-of-type > a:nth-child(5) {
color: green;
}
The first-of-type selector does as the name implies, and targets the first element of the specified type. In this example, we are targeting the 5th anchor in the first paragraph, and applying the green color to it.
Conclusion
These new sets of CSS tags require an updated browser to compile properly. If you are using an old version of Firefox or Chrome, we at Amortech encourage you to update to the latest release. If you are using Internet Explorer, we encourage you to try one of the previously mentioned browsers, and then uninstall IE from your computer for good.
The techniques described above are just a few of the tricks we at Amortech employ when designing new sites for our clients. Through the updated standard of CSS and HTML, we continue to learn and stay on top of the latest development and design features included in these languages, so we continue to provide leading edge products.
Recent Comments