HTML & CSS

Question 1

In HTML & CSS, what are the various clearing techniques and which is appropriate for what context?

Answer 1

The Empty Div Method is, quite literally, an empty div. <div style="clear: both;"></div>

The Overflow Method relies on setting the overflow CSS property on a parent element. If this property is set to auto or hidden on the parent element, the parent will expand to contain the floats, effectively clearing it for succeeding elements.

The Easy Clearing Method uses a clever CSS pseudo selector (:after) to clear floats. Rather than setting the overflow on the parent, you apply an additional class like “clearfix” to it.

Question 2

What is CSS selector specificity and how does it work?

Answer 2

CSS selector specificity is a measure of how specific a selector is in targeting a particular element in the document. It is a calculation that determines which style rule should be applied when there are multiple rules that apply to the same element.

The specificity of a selector is determined by four factors:

1. The number of ID selectors in the selector
2. The number of class selectors, attribute selectors, and pseudo-classes in the selector
3. The number of element selectors and pseudo-elements in the selector
4. The use of the universal selector (*)

Each factor is assigned a value, and the values are combined to form a specificity score. The values are as follows:

ID selectors: 100
Class selectors, attribute selectors, and pseudo-classes: 10
Element selectors and pseudo-elements: 1
Universal selector: 0

For example, the selector #header .nav li a has a specificity score of 110, because it has one ID selector (#header) and two class selectors (.nav and .li).