CSS Tricks Almanac

Hover Selector

For me personally, the hover selector is one of my favorite! Its typically used with an anchor element and changes the properties of the element when the cursor is over it.

I have an anchor element with a hover attached to it in the example.

.source:hover {
color: yellow;
text-decoration: underline;
cursor: grab;
}

The links to the sources on this page are all highlighted in yellow and underlines when you hover the cursor over them. The cursor also changes to the grab icon.

First Child Selector

The first child selector is used instead of using class selectors or ID's. When the first child selector is added to an element selector in CSS it styles the immediate first child of the element.

In the example I am using the article element and putting the first-child selector directly after it.

article:first-child {
color: red;
}

In this example, the first-child selector is directly after the article element in the CSS. In the HTML, whatever element is the direct child of article will have a font color of red.

is() Selector

The is() selector in CSS allows you to combine multiple easier than writing out every selector that you want to target together. It is also considered a forgiving selector, which means that if there is an invalid selector, the invalid selector will be ignored and the code will still run.

A user can use is() with any element to make styling the element easier.

section :is(h1, h3, a) {
color: hotpink;
text-decoration: underline;
}

In the example, all h1's, h3's and anchor content inside the section would have text that is hot pink and be underlined.

has() Selector

The has() selector works with elements that have other elements inside them. Its a parent selector that can select the children inside the element. Has() is a non-forgiving selector. So if there is an invalid selector in the code, it will not run.

There is a way to make has() a forgiving selector. You can nest is() or where() inside of it and it will become forgiving.

article:has(.some-class, h3, img) {
background: rgb(202, 8, 160);
opacity: 0.5;
}

In the example, the elements inside the article (.someclass, h3, and img) will all have a background color in the shade of pink and and opacity of 50%. As for has() being a non-forgiving selector, if there isn't a real class of "some-class", the has() selector would be invalid and not work.

justify-content Property

Justify-content aligns content along the main axis. Its helps distribute all the extra free space that isn't being taken up evenly. There are 6 values that can be used with justify-content: flex-start (default), flex-end, center, space-between, space-around, and space-evenly. Flex-start lines content up to the left edge. Flex-end starts content at the right edge. Flex-center puts the content in the center with equal free space on the left and right. Space-between has equal spacing between content. Space-around has equal space around the content and space-around has equal spacing in between content and equal space at the ends of the content.

section {
justify-content: center;
}

In the example the content in the section would be aligned in the center of the page with equal spacing on the left and right.

Z-index Property

Z-index is used for stacking items vertically that overlap. There are a couple reasons why elements could overlap. Negative margin, absolute positioning, or relative positioning could all be reasons elements could overlap. Z-index could help with getting the element you want on top be in the correct position.

img {
z-index: 999;
}

Setting the image to a z-index to 999 will make sure that nothing is stacked on top of it.

Text-Stroke Property

Text-stroke is an experimental property. It is a text decoration kind of like the text-shadow, that helps style text. Instead of being a shadow behind the text, text-stoke outlines text and can have a custom thickness and color choice. Because it is still experimental, it still needs to be used with the -webkit prefix.

When writing the CSS code for text-stroke, it is really shorthand for 2 properties. One being width and the other being color. The width determines the thickness of the border around the text and the color is the color you want it to be.

header h1 {
-webkit-text-stroke: 3px rgb(226, 226, 244);
}

For the example, I used the text-stroke property on the h1 in the header on this page to outline the text in an off-white border around the lettering.

Disabled Property

The disabled selector is used on buttons, input fields, text areas, options and fieldsets. When used in the CSS, it disables the element.

In the example I used the disable selector with the input element and then used the background property to fill the input field with a solid color.

input:disabled {
background: rgb(4, 27, 233);
}

The the input element being disabled, the user can't input anything into the input box and the box is filled with a solid blue color.