Some cool CSS stuff

css3-markupAfter my article about frontend development  where I particular focused on tools and javascript I will now focus more on CSS and styling. I can still remember the time when I started with web development and I used only inline styles. Now this is absolutely not done anymore. And that is very understandable considering that CSS has grown into a mature styling language nowadays and you don’t want to put all these logic in your html code.

A good frontend developer seperates logic (javascript), styling (css) and structure (html) and puts all this in different files. Today this might sound like common practice but not that long ago this wasn’t always the case. In this article I am going to show some tips and tricks about new (and not so) trends in the world of CSS. If you are a real frontend developer you might know all of this already but for everyone else who want to know how real frontend developers do it please keep on reading.

Pixels vs Em vs Rem

Do you know the difference between these? You might have seen them in your css files but how do they relate? I think everybody knows what pixels are. If not please read this first. Until very recently it was common to define all font sizes in pixels. But today this is not best practice anymore. Today you can better use em and rem units. In contradiction to pixels, rem and em are relative units. Pixels are absolute.

em: looks at the parent font size where 1 em = parent font size (px)
rem: looks at the root font size. So it is relative to the font size used in your HTML tag. 1 rem = root font size (px)

Example:

In this example the root font size is 20 pixels. So the font size of h1 is 2 rem = 2 * 20px = 40px.
The font size of div is 1.5 em = 1.5 * 30 px because the parent of the div tag is the html. If you body had a font size specified it would be equal to the font size in your body tag.
If your h1 would have a font size of 2 em instead of 2 rem it would be 2 em = 2 * 30 px = 60 px.

Check out this JSFiddle example and play around with it.

Advance CSS Selectors

If you are a bit familiar with CSS you know the most common css selectors:

  • #foo : Selects element with id ‘foo’
  • .foo : Selects all elements which have a classname ‘foo’
  • h1 : Selects all h1 elements
  • h1.foo : Selects all h1 element which have a classname ‘foo’
  • div.foo .bar : Selects all elements inside a div element with classname ‘foo’ that have a classname ‘bar’

But there are much more and I will dive into that now.

Which selector is applied?

Do you think that the latest selector always overrides the previous one that we wrote for the same element? If you keep your selectors simple then this might be the case but it’s not a rule. Which selector wins is defined by it’s specificity value. I see you thinking what the hell is this? It’s a special value that you can assign to every selector. The highest wins where ever it’s located in your css file. If two selectors have the same specificity value then the latest selector wins like you are used to. I am not going into too much detail about this here because there are some excellent websites explaining this in full detail:

Let me give you an example:

So what color do you think that this list element has? You probably think that ‘Whiskey and Ginger Ale’ is red but it is black! If you don’t believe me check it out yourself here on JSFiddle. So how can you make it red? You need to make the specificity value of the selector .favorite higher. You can do this by making him more specific.

The more unique (specific) you make the selector the higher it’s specificity value is. You can see which styles are applied in your browser css inspector.

It’s a good practice to make your css selectors as unique as possible. So don’t use selectors like .favorite but make it more unique like in the example above. This also avoids wrongly applied styles.

Attribute selectors

Now you know why and when a selector is applied let’s take a look at some more advance selectors. Attribute selectors let you target an element based on its attributes. With an attribute selector you can apply a style on a element that has a specific attribute with a specific value.

Every div that has an attribute name with the exact value info will have a background color. There are of course much more options available like:

[att*=”foo”] : attribute value should contain ‘foo’
[att^=”foo”] : attribute value should start with ‘foo’
.. etc

Child selector

The child selector is represented by the sign “>”. It allows you to target elements that are direct children of a particular element.

Example:

In this example h2 element Title 1, Title 2 and Title 3 will be red. All other h2 elements have the default color. Check it out here.

Sibling combinators

There are two type of sibling combinators, adjancent and general.

Adjancent Sibling Combinator

Use the (+) symbol to target two elements that have the same parent and the second one comes directly after the first one. This can be useful when dealing with text for example when you want to add a top margin to all paragraphs directly after an h2 tag.

This construction will give the first paragraph a left margin of 40px as you can see here.

General Sibling Combinator

Like the adjancent sibling combinator with the exception that the second selector doesn’t have to immediately follow the first one. Use the symbol (~) for this.

Pseudo-classes

This is a cool phenomenon because these or not real classes. These ‘classes’ are dynamically added to your elements on events like hover, active, focus etc. They are also automatically removed as soon as the event ends. But because they exist you can style elements based on events. For example when you hover over a div your can change its background color:

Here is a list of some pseudo-classes that can come in handy:

:hoverActivates when user moves cursor over element
:visitedLinks that have been visited
:targetCan be used when you use anchors in your website. For example if an element has an anchor #about and you clicked on a link that points to this anchor this pseudo class becomes active and you can for example highlight the anchor.
:linkLinks that haven't been visited yet.
:lang()Selects an element or link only if the language of that link or element matches. For example :lang(en).
:focusElement in focus (used in forms for example)
:first-childSelects first child of another element. For example you can apply a style only to the first item of a list.
:nth-child()Selects the nth child of another element. For example select the third list item :nth-child(3). Supports expressions like :nth-child(3n+4) which will select every third element starting from the 4th. Or :nth-child(even) to select all even children from the start.
:nth-last-child()Start counting from the last one
:nth-of-type()Will only match children that match the type in the selector but works like nth-child. For example p:nth-of-type(even) will select all even PARAGRAPH elements but not other type children like div.
:enableIs activated when element state is enabled
:disableIs activated when element state is disabled
:checkedIs activated when element state is checked
:activeActivates when user clicks on element
:nth-last-type()Same as nth-of-type but starts from the last one
:emptyElement that has no content
Negation pseudo-class

You can use :not() to select all elements except this. For example:

Will select all input buttons except with type submit.

Pseudo-elements

Beside pseudo-classes we also have pseudo-elements. These are elements that do not really exist like first-line or text-block.

p::first-line  => Selects the first line of a paragraph

p::first-letter => Selects the first letter of a paragraph

 

Last cool CSS trick!

Did you know that you can add content ::before and ::after elements using purely css?

And that is not all yet. You can also create CSS countersI am not going to dive any deeper anymore into CSS for now but as you see there is more to styling then just adding borders and background colors.

More information