To style only the first list item of an unordered list in CSS, you should use the ul li:first-child selector. This targets the first li element within a ul element. It's important to note that :first-child targets the first child of its parent, not the first of its type.

The CSS property used to clip an element to a basic shape like a circle or ellipse is clip-path. This property allows you to define a clipping path that restricts the visible area of an element to the specified shape. It's commonly used for creating non-rectangular shapes. border-radius is used to round the corners of elements, not for clipping.

To reverse the order of flex items, you can use the CSS order property with a negative value. This property allows you to control the visual order of the flex items without changing their actual HTML order.

To specify a fallback font in case the primary font fails to load, you can use the "font-family" property with multiple font options. You list the preferred font first and then provide alternatives separated by commas. If the primary font is unavailable, the browser will attempt to use the next font in the list until it finds a suitable option or defaults to a system font.

Inside the @font-face rule, the "src" attribute is used to specify the font file's source location. This attribute tells the browser where to find and load the font file, allowing you to use custom fonts in your web design. It typically points to the location of a font file using a URL or local file path.

To specify the duration of a transition effect in CSS, you use the transition-duration property. This property defines the amount of time it takes for the transition to complete. You can specify the duration using units like seconds (s) or milliseconds (ms). For example, transition-duration: 0.5s; sets the transition duration to half a second.

The primary difference between clip-path and mask in CSS is that clip-path clips an element to a specified shape, whereas the mask property applies an image as a mask to an element. This fundamental distinction affects how elements are visually modified and displayed.

The CSS property used to vertically align inline elements or inline-block elements is vertical-align. It allows you to control how the element aligns in relation to the surrounding content or other inline elements. It's commonly used for aligning elements such as images and text within a line of text.

To style list items that are not the first child, you can use the pseudo-class ":not(:first-child)." This allows you to target and style all list items except the first one in a list.

The em unit is relative to the font-size of the element itself, while the rem unit is relative to the font-size of the root element (html). This means that em units can compound if used within nested elements, whereas rem units remain consistent throughout. Understanding this difference is crucial for responsive design.