Deep dive into CSS selector combinations

Jay Rajput — Sat, 12 Dec 2020 09:47:43 +0000

In CSS, selectors are used to target the HTML elements we want to style. We can combine selectors to get meaningful relationship and target specific elements. Below are some of the less used but handy selector combinations:

Descendant combinator
Child combinator
Adjacent sibling
Child sibling

We will refers to below HTML code block for understanding combinator selectors.

Descendant combinator

Descendant combinator selects a combination where the second selector is descendant for first selector. Second selector does not needs to be a direct descendant for first selector and is separated from first selector by a white-space.

.container p{
  color: orange;
}

Here all the descendant paragraphs of the .container class will have the text colored orange.

Child Combinator

This type of combinator selects only the element matched by the second selector that are direct children of first selector.

.container>p{
  color: blue;
}

After applying the above combinator only the paragraphs that are direct children of .container class will have background color of blue. Notice below that paragraph four is still the same since it is not a direct child of .container parent class.

Adjacent Sibling

This combination matches only second element that immediately follows the first element. The selectors are separated by "+" symbol and they both belong to the same parent element.

a + p{
  background-color: grey;
}

After applying above combination, the paragraph that immediately follows the anchor tag (abc site in this case) will have a background color of grey.

General Sibling

General sibling combinator matches the second elements that are adjacent siblings(not necessarily immediate sibling) of the first element and belong to same parent.

span ~ p{
  color:yellow;
}

After applying the above combination, all the adjacent paragraphs following span tag will have text colored yellow. Notice that paragraph four is not selected since it does not belongs to the same parent.

QUIZ TIME

.container p[class*="para-four"]{
  color: black;
  background-color: white;
}

What do you think the above selector combination will display and why?🤔
Let's hear out in comments!

For more details about selectors checkout MDN site

Learning how to learn

Jay Rajput — Thu, 26 Nov 2020 04:47:37 +0000

The most successful people in the world are lifelong students. That means they're continuously learning new skills, keeping up with the latest in their chose field, and staying apprise of what the other field have to offer them.

Jim Kwik

A person's approach to learning is the very important factor in mastering any subject that he is interested in. That's why learning how to learn is such an important aspect. The books LIMITLESS by Jim Kwik changed my whole perspective about learning. I would like to share a few things that help me to understand and learn new things.

Active Recall and Spaced Repetition

This one plays a major role in how well I understand and retain the information. Once I go through some topic I try to summarize what I have learnt. This makes sure I am actively engaged in the topic I am learning not just cramming through the information. Also once I complete a good chunk of topic, I go back to it after a while and try to recollect as much information as possible.

Deliberate Practice

One the habit I have is skimming over the difficult part. It comes out of sheer comfort zone. But whenever this happens I try to force myself to sit uptight and break the topic into small group of concepts so that it becomes easy to grasp.

State while learning

Learning is state dependent. I make sure I sit in a proper posture and make sure that the I am consuming the most important topic of my life. If have observed that if I slouch and have no interest in the topic then I retain less information.

Active note taking

I make sure I have a goal in mind before I start making notes for any topic. Also I don't write down every bit of information on note, just the bullet points. Also I make sure I go over the notes once I have written them down just to make sure I have note missed out any information.

What about you?

How do you approach learning and what the some tips you follow to learn better. I would love to hear them out.

DEV Community: Jay Rajput