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
Posts By: Renat
: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:
:first-child
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