DEV Community

Cover image for 2# CSS Interview Topics
Vasco Neves
Vasco Neves

Posted on

2# CSS Interview Topics

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.

Top comments (0)