2# CSS Interview Topics
Tags: css, interview
Published: 2022-08-09 18:04:18


* [Basic Selectors](#basic-selectors) 
 * [Universal Selector](#universal-selector) 
 * [Element Selector](#element-selector) 
 * [Class & ID Selector](#class&id-selector) 
 * [Attribute Selectors](#attribute-selectors) 
* [Grouping Selectors](#grouping-selectors) 
* [Combinators Selectors](#combinator-selectors) 
* [Pseudo Selectors](#Pseudo-selectors) 
* [Selectors Priority](#selectors-priority)

##Basic Selectors <a name="basic-selectors"></a>

###Universal Selector <a name="universal-selector"></a>
| Selector      | Description| 
| ------------- |:-------------:| 
| *             | Selects all elements | 



###Element Selector <a name="element-selector"></a>
| Selector      | Description| 
| ------------- |:-------------:| 
| `<input>` | Selects all `<input>` elements | 


###Class & ID Selector <a name="class&id-selector"></a>
| 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 <a name="attribute-selectors"></a>
| 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 <a name="grouping-selectors"></a>

| Selector      | Description| 
| ------------- |:-------------:| 
| `div,span` | Selects both elements | 


##Combinators Selectors <a name="combinator-selectors"></a>

| 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 <a name="pseudo-selectors"></a>

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


##Selectors Priority <a name="selectors-priority"></a>

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.