JWS Docs / CSS Intro / Colour Utility Features

/*---- set colour ----*/
body {
    color: hsl(120deg 100% 19.61%);
}

/*---- properties where you might reuse the colour ----*/
.card {
    background-color: current-color;
    border-color: current-color;
    box-shadow: current-color;
}

::selection

When browsing, have you ever tried selecting text in order to copy it, and noticed as you do, the text you have selected is highlighted? This is because of the ::selection pseudo-element which is applying styles to the selected text, the default behaviour for this in Edge & Chrome browsers is for the text to turn white while its background colour turns blue.

Though it is possible to set your own chosen styles overriding the browsers defaults, so you can match the user selected text with the colour scheme of your website.

It is possible to use it to style either individual elements or the whole page.

/*---- target & style all paragraphs ----*/
p::selection {
    color: rgb(255, 255, 255);
    background-color: hsl(120deg 100% 19.61%);
}

/*---- style whole page with bare pseudo-element ----*/
::selection {
    color: hsl(327.76deg 92.45% 68.82%);
    background-color: rgb(128, 128, 128);
}

The properties that this pseudo-element can change are limited to:

• color - sets colour of selected text
• background-color - sets background colour of selected text
• text-decoration
• text-shadow
• -webkit-text-stroke-color, -webkit-text-fill-color and -webkit-text-stroke-width

If you try to style elements with any other properties than these, then they will be ignored and not applied. Its also important to note that this pseudo element needs a double colon :: to work, unlike some others that only require a single colon.

::selection Resources & References

For more on ::selection why not try these:

MDN ::selection

Can I Use ::selection CSS pseudo-element

:target

A common pattern on many a website is cross referencing & jump-to links, such as those with docs or faq pages often have. These are URL's that link to a particular section of a webpage. This can be either on the same webpage, a different page of the same website, or to another website. It does this by targeting the URL fragment identifier, this is the last bit of the URL that starts with the # character.

http://www.examplelink.uk/faqpage/#interesting-bit

Here the URL fragment identifier is #interesting-bit which would link and take you to a section of a webpage with the id="interesting-bit".

<section id="interesting-bit">Interesting Information</section>

Usually when this happens the page you are taken to will scroll until it reaches the section of the page its linked to, and often positions it inline to the top of your screen. However occasionally this isn't possible, like when the jumped to section is too near the page bottom, so can't be clearly positioned at the top of the screen.

This is where being able to highlight the linked section in some way would be helpful, which is where the use of the :target CSS pseudo-class comes in handy. We can use this :target to add styling that will help highlight the linked content, such as adding a background colour to it or the title, indent the contents slightly and add a coloured border or some kind of marker like an arrow character.

:target {
    border-left: 3px solid skyblue;
    padding-left: .5rem;}

This code would make this section look like this!

With a skyblue coloured border.

Along with a little padding to move the contents away from the border.

:target Resources & References

For more on :target why not check out these MDN docs & CSS Tricks article:

MDN - :target

MDN - URI fragment

CSS Tricks - Using the CSS :target Selector

Caret colour

A caret, or also know as a text cursor, is the indicator line showing where text input will be added or can be edited by the user. It indicates the insertion point for HTML elements like the ones found on forms such as <input> and <textarea> elements.

Its most commonly represented on web interfaces by a thin, vertical, and often flashing line (not to be mistaken for the mouse cursor), or text character sized box.

This unassuming little character is more often than not overlooked when styling up a website and left to the browsers default colour settings. But it is possible to apply your own colour choice for an element's editable content, by setting the elements <caret-colour>.

element {
    caret-color: rgb(255, 255, 255);
}

HTML elements with text entry fields or boxes that contain a caret are:

<input type="text">
<input type="password">
<input type="search">
<input type="date"> 
<input type="time">
<input type="datetime-local">
<input type="number">
<input type="range">
<input type="email">
<input type="tel">
<input type="url">
<textarea>
Plus any element with its content editable attribute set

Caret Resources & References

Can I Use - CSS caret-color

MDN - Caret