The :default pseudo selector will match the default in a group of associated elements, such as the radio button in a group of buttons that is selected by default, even if the user has selected a different value.
Examples include the default submit button in a group of buttons, the default option from a popup menu, the radio button that has the checked attribute set in the HTML (as seen in supporting browsers), and the checkboxes that are by default checked.
Different browsers have different levels of support. Firefox provides full support. Webkit browsers support default on buttons but not on radio or checkboxes, and Opera is the inverse, supporting it on radio buttons and checkboxes, but not on the submit.
A class selector in CSS starts with a dot (.). A class selector selects all elements with a matching class attribute.
You can give a class any name that starts with a letter, hyphen (-), or underscore (_). You can use numbers in class names, but a number can’t be the first character or the second character after a hyphen.
An element can have more than one class. An element with multiple classes is styled with the CSS rules for each class. You can also combine multiple classes to select elements.
A child combinator in CSS is the “greater than” symbol. It means “select elements that are direct descendants only”.
A child combinator in CSS is the “greater than” symbol. It means “select elements that are direct descendants only”.
The ul li {} selector is a decendant selector. It will select any list items that are anywhere underneath an unordered list in the markup structure. The list item could be buried three levels deep within other nested lists, and this selector will still match it.
The ul “greater than” li selector above is a child combinator selector. This means it will only select list items that are direct children of an unordered list. In otherwords, it only looks one level down the markup structure, no deeper. So if there was another unordered list nested deeper, the list item children of it will not be targeted by this selector.
There are 3 types of Child selectors in CSS :
Child combinator
Using a child combinator you can select only those top level list items and not worry about the large/header styling cascading down to the nested lists and having to fight against that styling.
Adjacent sibling combinator
An adjacent sibling combinator selector allows you to select an element that is directly after another specific element.
General sibling combinator
The general sibling combinator selector is very similar to the adjacent sibling combinator selector we just looked at. The difference is that that the element being selected doesn’t need to immediately succeed the first element, but can appear anywhere after it.
:current is a CSS pseudo-selector that matches an element or an ancestor of an element that’s currently in display.
It’s a lot like is() in that sense. But what makes this pseudo-selector interesting is that it’s part of what the CSS Selectors Level 4 specification calls “time dimensional” pseudo-classes which are designed to match elements along a timeline, such as subtitles in a video.
This is all very conceptual at the moment. The spec itself is in Working Draft status. That means :current has been defined, but there’s very little support for it and what we have now is subject to change by the time it.
The :checked pseudo-class in CSS selects elements when they are in the selected state. It is only associated with input elements of type radio and checkbox.
The “Checkbox Hack” is where you use a connected label and input type=”checkbox” and usually some other element you are trying to control.
