Styling the Syntax Highlighter

I am using the Syntax Highlighter Evolved by Alex Gorbatchev and for those of you who are curious, this is how I styled the code block.

I have added a border and change the font size to 16px so that it could better fit into the post.

.syntaxhighlighter {
	background-color: white !important;
	border: 1px solid #DADAD9 !important;
	margin-bottom: 20px !important;
}

body .syntaxhighlighter .code {
	font-size: 16px !important;
}

body .syntaxhighlighter .gutter {
	font-size: 16px !important;
}

CSS3 Selectors: Negation pseudo-class :not(s)

This entry is part 40 of 40 in the series CSS3 Selectors

Pseudo-class: not(s)

This is probably the last CSS3 selector that we will look at.

In many ways, it works in reverse to other selectors as it allows you to target elements that do not match the selector’s argument s.

An example here is in styling all form inputs that are not Submit buttons.

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>Quick contact form</title>
    <style>
        input:not([type='submit']) {
            width:250px;
            border:1px solid greenyellow;
        }
    </style>
</head>
<body>
<form>
    <fieldset>
        <legend>Contact information</legend>
        <ul>
            <li>
                <label for='email'>Email:</label>
                <input required type='email' id='email' name='email'/>
            </li>
            <li>
                <label for='tel'>Telephone number:</label>
                <input required type='tel' id='tel' name='tel'/>
            </li>
            <li>
                <label for='url'>Website:</label>
                <input required type='url' id='url' name='url'/>
            </li>
        </ul>
        <input type='submit' value='Submit this' />
    </fieldset>
</form>
</body>
</html>

CSS3 Selectors: Pseudo-element ::after

This entry is part 39 of 40 in the series CSS3 Selectors

As with the previous example, we can add a text content using ::after.

.
Another use case for ::after is to insert an attribute of the targeting element.
.
Here we retrieve the href using attr(href) and insert the href link after the text content.
<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Codecrawl.com - HTML5</title>
    <style>
        a[href^=http]:after {
            content: " (" attr(href) ")";
        }
    </style>
</head>
<body>
<a href='http://yahoo.com'>I am going to yahoo!</a>
</body>
</html>

CSS3 Selectors: Pseudo-element ::before

This entry is part 38 of 40 in the series CSS3 Selectors

CSS3 introduced a new double-colon (::) syntax for pseudo-elements to distinguish between them and pseudo-classes.

We use an earlier figcaption example to add a text content to a figure caption.

Note that we are actually inserting content inside the element that we are targeting and in the example below, we are targeting <figcaption>.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Codecrawl.com - HTML 5</title>
    <style>
        figcaption::before {
            content:'Figure: ';
            font-weight: bold;
            color: brown;
        }
    </style>
</head>
<body>
<figure>
    <img src='//codecrawl.com/code/images/ushuaia.jpg' width='300px'>
    <figcaption>Ushuaia, the southernmost city in the world</figcaption>
</figure>
</body>
</html>


 

 

 

CSS3 Selectors: Pseudo-class :empty

This entry is part 37 of 40 in the series CSS3 Selectors

:empty can be an extremely useful pseudo-class.

It represents an element with no content.

Imagine we’ve got a dynamically generated list in our page that has no contents; we can hide it using :empty.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Lists</title>
    <style>
        li:empty {
            display: none;
        }
    </style>
</head>
<body>

<h4>British Pop</h4>
<ol>
    <li>Cold Play</li>
    <li>Depeche Mode</li>
    <li>Adele</li>
    <li></li>
</ol>

</body>
</html>


If we remove the empty selector, the last empty item in the list will be displayed.

Lists