The :in-range pseudo selector in CSS matches input elements when their value is within the range specified as being acceptable. <input type=”number” min=”5″ max=”10″> input:in-range { border: 5px solid green; } I believe it’s only relevant on input[type=number]. Range inputs don’t allow values outside their min/max and it doesn’t make much sense on any other
CSS
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
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
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