The :hover pseudo class in CSS selects elements when the mouse cursor is current over them. It’s commonly associated with link () elements. a:hover { color: green; text-decoration: underline overline; } So when a link like this is “hovered”: <a href=”#”>Go to CSS Park</a> It will turn green and have a line beneath and above
General sibling
The general sibling combinator (~) in CSS looks like this in use: .featured-image ~ p { font-size: 90%; } In that example, you would be selecting all paragraphs in an article that come after the featured image (an element with a class name of “featured-image”) and making them of slightly smaller font-size. This selects elements at
:focus
The :focus pseudo class in CSS is used for styling an element that is currently targeted by the keyboard, or activated by the mouse. Here is an example: textarea:focus { background: pink; } And here’s what that code looks like in action: Any element (most commonly <input>s and <textarea>s) are in “focus” when they are selected and ready to
:first-of-type
The :first-of-type selector in CSS allows you to target the first occurence of an element within its container. 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 with a title and several paragraphs: