2# CSS Interview Topics

• Basic Selectors
  • Universal Selector
  • Element Selector
  • Class & ID Selector
  • Attribute Selectors
• Grouping Selectors
• Combinators Selectors
• Pseudo Selectors
• Selectors Priority

Basic Selectors

Universal Selector

Selector	Description
*	Selects all elements

Element Selector

Selector	Description
<input>	Selects all <input> elements

Class & ID Selector

Selector	Description
.container	Will match any element that has a class of "container"
#firstname	Will match any element that has a ID of "firstname"

Note:. There should be only one element with a given ID in a document.

Attribute Selector

Selector	Description
[attr]	Selects elements with a attr attribute
[target="_blank"]	Selects elements with an target matching
[title~="flower"]	Select elements with an attribute value containing a specified word "flower"
[class^="top"]	Selects all elements with a class attribute value that starts with "top"
[href$=".org"]	Selects elements with an href ending ".org"
[href*="exam"]	Selects elements with an href containing "exam"

[class=|"top"] Select elements with the specified attribute, whose value can be exactly the specified value, or the specified value followed by a hyphen, like class="top-text"

Grouping Selectors

Selector	Description
div,span	Selects both elements

Combinators Selectors

Selector	Description
div p	Selects nodes that are descendants of the first element
ul > li	Selects nodes that are direct children of the first element
div ~ p	Selects both elements
h2 + p	Matches the second element only if it immediately follows the first element

col || td Matches the second element only if it immediately follows the first element

Pseudo Selectors

Selector	Description
:	Selects elements based on state information that is not contained in the document tree
::	Selects the pseudo element

Selectors Priority

The more specifically a CSS selector targets an HTML element, the higher is its specificity. We can imagine that each CSS selector have a value assign like you can see below, the higher the value the more importance have.

• Inline style worth 1000
• #id selectors are worth 100
• .class selectors are worth 10
• tag selectors are worth 1

CSS Selector	Description
Inherited styles	Lowest specificity of all selectors - since an inherited style targets the element's parent, and not the HTML element itself.
*	Lowest specificity of all directly targeted selectors
element	Higher specificity than universal selector and inherited styles.
attribute	Higher specificity than element selector
class	Higher specificity than attribute, element and universal selectors.
ID	Higher specificity than class selector.
Combined selectors	Gets the specificity of the selectors combined.
CSS properties set directly on element, inside style attribute.	Stronger specificity than ID selector.

BUT everything changes when it is used !important
and why is that, basically !important change the priority of the selectors and the one that have it will even override inline styles.