:first-child

Posted by & filed under F.

The :first-child selector allows you to target the first element immediately inside another element. It is defined in the CSS Selectors Level 3 spec as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling content. Suppose we have an article and want to make the first paragraph larger – like

Continue reading →

::first-line

Posted by & filed under F.

The ::first-line pseudo-element is for applying styles to the first line of an element. Imagine a paragraph that is several lines long (like this one!). ::first-line allows you to style that first line of text. You could use it to make it larger or set it in small-caps as a stylistic choice. The amount of text targeted

Continue reading →

::first-letter

Posted by & filed under F.

::first-letter is a pseudo element which allows you to style the first letter in an element, without needing to stick a <span> around that first letter in your HTML. While no tags are added to the DOM, it is as if the targeted first letter were encompassed in a<firstletter> tag. You can style that first letter as

Continue reading →

:enabled

Posted by & filed under E.

The :enabled pseudo-class in CSS selects focusable elements that are not disabled, and therefore enabled. It is only associated with form elements (<input>, <select>, <textarea>). Enabled elements includes ones in that you can select, that you can enter data into, or that you can focus on or click. So when a checkbox is checked, and you are

Continue reading →