CSS

Selectors

Source

This blog is rendered from markdown. All post content is markdown. In order to style e.g. the source links via CSS no IDs or classes are being exported from markdown to HTML. In order to still address the source-links and align them right and with a smaller font, they are target with CSS selectors pointing to a certain attribute.

A markdown link like this

[Source](http://www.example.com)

will generate HTML code like this:

<a href="http://www.example.com">Source</a>

You cannot target this specific link unless you make all links the same style.

CSS selector can neither select the text of the link as an attribute. The solution for this problem is in the markdown specification: Link Titles.

Titles can be addressed as an attribute for the CSS selector. Markdown code like this

[Source](http://www.example.com 'Source')

will generate HTML code like this:

<a href="http://www.example.com" title="Source">Source</a>

This can be selected via CSS and assigned a style that will differ from common links in HTML.

/*
 * Special style for all source links
 */
a[title='Source'] {
  float:right;
  font-size: 0.5em;
  font-weight:normal;
}

This will change the floating of the link to right, set the font-size to 0.5em and remove any bold styling on the link that might be assigned.

The link on the top of this section has been made following this procedure (though the link is not really the source of this).