Skip to main content

CSS ‘>’, ‘+’, ‘~’ Selectors Explained Simply

 Knowing CSS selectors is easily one of the most important aspects of web development. As a former backend developer, it makes me cringe how bad I was at CSS selectors. Not knowing selectors is known to cause mangled front ends and ugly Bootstrap UI’s!

  • Element selectors
  • Descendant selectors
  • Class selectors
  • Id Selectors
  • Child Selectors
  • Adjacent Selectors
  • Pseudo Selectors

Element Type Selectors

The most basic CSS selectors are Element Type Selectors. With elements selectors all you are doing is selecting the element.

Element selectors are most common when you first setup your CSS and assign very broad actions like fonts, colors, line heights, etc. Very rarely will you use CSS selectors for things like positioning.

body {
    font-family: var(--body-font);
    color: var(--text-dark);
}

Descendant Selectors

The descendant selector is used to match elements that are descended from another matched selector.

This selector is easy to spot because it is just a space.

It selects ALL children of the parent regardless of how deeply nested they are.

Descendant selectors can be very broad and many people get them confused with child selectors,

main div {}

body div p {}

Child Selectors

Child selector is very similar to descendant selector but is not as deeply nested and does not target past the immediate selector.

div > p {
    font-size: 12px;
    color: blue;
}

Also, we can target specific child elements using first-child or last-child selectors.

p:first-child {
   color: red;
}

div p:last-child {
  color: red;
}

Adjacent Sibling Selectors

div + p {  
   font-size: 12px;
   color: pink;
}

We can use the + to indicate we want an adjacent sibling element.

When you think of the word adjacent, what comes to mind? Probably something along the lines of right next to something.

The adjacent element only matches the second element if it immediately follows the first element. Also, both selectors must be children of the same parent.

General Sibling Selector (aka tilde selector ~)

This selector is similar to sibling selectors x + y , but it is not as strict. Adjacent selector (ul + p ) will only selector the first element directly after the former selector, but general sibling selectors all elements.

ul ~ p {
   color: red;
}

In this case, sibling selector will select all p elements following the ul tag.

Comments

Post a Comment

Popular posts from this blog

Higher Order Functions in JavaScript Explained Simply

  What is a higher order function? In JavaScript, a higher-order function is a function that  takes one or more functions as arguments,  or returns a function as output. These functions are a powerful feature of the language that allow you to write concise and expressive code. The best way to learn higher order functions (and likely the most “real-world”) is to look at “map()” and “filter()”. Both take functions as arguments where the function is applied to each element in an array. Map For example, consider the  map  function, which is used to apply a function to each element of an array and return a new array containing the results. The  map   function is a higher-order function because it takes a function as its argumen t, in this case the function to apply to each element of the array. const numbers = [1, 2, 3, 4, 5]; const squares = numbers.map(x => x * x); Filter Another common higher-order function is  filter , which is used to select el...
Post a Comment
Read more

Basic CRUD Array Operations in JavaScript

  Sometimes it pays just to stick to the basics. Here are CRUD operations for a basic array: 1. Create an element to the end of an array let clubs = ['baseball','running','computer club']; clubs.push('tennis'); console.log(clubs); 2. Delete an element from the end of an array let clubs = ['baseball','running','computer club']; const lastElement = seas.pop(); console.log(lastElement); 3. Reading an index from an element in an array let clubs = ['baseball','running','computer club']; let index = clubs.indexOf("running"); console.log(index); 4. Update an index from an element in an array let clubs = ['baseball','running','computer club']; clubs.splice(1, 0, 'tennis'); console.log(clubs);
Post a Comment
Read more

Spring Data JPA Many-To-Many Explained Simply

  At a certain point in your Java career, it is inevitable to arrive at a point where you have models that are related to each other but cannot be solved with foreign keys. A good example of a many-to-many relationships is the relationship between rice and sauces. I love ALL types of different rice with different types of sauces. Sometimes I like Jasmine rice with spicy curry, while other times I like sticky rice with soy sauce. In a pinch, I’ve even ate Jasmine rice with soy sauce! *crowd gasps* Overall, many-to-many is a relationship that has infinite amounts of different combinations. Try to apply the rice analogy to a  one-to-many relationship  and it will not work. Many-To-Many Relationships To maintain a many-to-many relationship between two tables in a database, the only way is to have a third table which has a reference to both sides of the table. This table is called a “join” table and each entry in this table will connect the source table and target table. Many-...
Post a Comment
Read more