[TIL] 20201113 The World of CSS Selectors

Universal Selectors

Selects every possible element on the page

* {
    color: black;
}

 

 

Element Selectors

Selects a specific kind of elements on the page

button {
    font-size: 30px;
}

// choose both h1 and h2
h1, h2 { 
	color: olive;
}

 

 

ID Selectors

• ID attributes can be used as selectors to single out an element
• ID is a unique identifier for a single element.

#id {
    color: olive;
}

 

 

Class Selectors

• Class : ID that can be aplied to multiple elements. Elements don't have to be same type.

HTML

<span class="tag">Tag</span>

CSS

.tag {
    color: orange;
}

 

 

Descendent Selectors

Selects nested elements.

/* Selects all <a>s that are nested inside of an <li> */

li a {
    color: teal;
}

/* Can mix things up with class */

.tag a {
    color: red;
}

 

 

Adjacent Selectors (Combinators)

Selects elements that are immediately preceded by certain element.

/* Select only <p>s that comes right after an <h1> */

h1 + p {
    color: red;
}

 

 

 

Direct Child Combinator

Selects only elements that are direct children of certain element.

/* Select only <li>s that are direct children of a <div> element. */

div>li {
    color: white;
}

 

 

 

Attribute Selectors

Allows to select elements based upon some particular attribute.

/* Select all input elements where the type attribute is set to 'text' */

input[type="text"]{
    width: 300px;
    color: yellow;
}

To select elements that include certain text: *= instead of =

/* href that includes "google" */

a[href*="google"]{
    color: magenta;
}

To select elements that ends with certain text: $= instead of =

/* href ends with '.org' */

a[href$=".org"]{
    font-style: italic;
}

 

 

 

Pseudo Classes

• Keyword added to a selector that specifies a special state of the selected elements.
• Start with a colon.

:hover

/* Selects any <a> element when hovered */

a:hover{
    color: orange;
}

:checked

/* When elements are checked (i.e. checkbox) */

input[type="checkbox"]:checked{
    color:red;
}

:nth-of-type( )

/* Selects every 4th <p> element among any group of siblings. */

p:nth-of-type(4n){
    color: lime;
}

 

 

 

Pseudo Elements

• Keyword added to a selector that lets you style a particular part of selected element(s).
• Start with two colons, but one colon also worls with Chrome.

::first-letter

Applies styles to the first letter of the first line of a block-level element, but only when not preceded by other content (i.e. images, inline tables...)

/* Selects the first letter of a <p> */

p::first-letter {
    font-size: 130%;
}

::selection

Applies styles to the part of a document that has been highlighted by the user (i.e. clicking, dragging across text)

 

::selection {
    color: pink;
}

 

 

 

The CSS Cascade

• The Cascade
  • The order your styles are declared in and linked to matters. The latter one is used.
  • If there are more than one CSS files, the latter CSS file that is linked to the HTML file gets used.

 

 

Specificity

• How the browser decides which rules to apply when multiple rules could apply to the same element.
• It is a measure of how specific a given selector is. The more specific seletor "wins".

1 (wins)	2	3 (loses)
ID selectors	Class, Attribute, Pseudo-class selectors	Element, Pseudo-element selectors

 

 

 

Tip: Chrome Dev Tools & CSS

If a CSS line is crossed off, it means it's losing with specificity.

 

 

 

Inline Styles & Important

Inline Styles

• Styling in HTML
• More specific than ID. (Which is why nobody used them)

Important

• Overrides inline styles, high specificity. It wins automatically.

h1 {
    color: red !important;
}

 

 

 

CSS Inheritance

• Some properties are inherited by child elements if they're not set on that element specifically.
• Properties are inherited from the closest parent that does have the property.
• There are elements that don't inherit. They can be inherited with: 

color: inherit;

 

 

 

 

 

 

* This post is a summary of Udemy Course "The Web Developer Bootcamp" by Colt Steele.