CSS Selectors x

April 19, 2022
Uncategorized

Difficult to remember CSS selectors

X Y

div p {
  color: red;
}

One of the most popular selectors is the selector of descendant. If you need to select all paragraphs inside of div this will be the easiest way. This selecteor will work in situation:

<div>
	<p> Work hire </p>
	<span>
		<p> Work hire </p>
	</span>
	<ul>
		<li class="warning">Something went Wrong </li>
		<li>
            <p>Work hire </p>
        </li>
	</ul>
</div>

X > Y

The difference between X Y and X > Y is that > selector will select only direct children. For example.

div > p {
  color: red;
}

Will act as below

<div>
	<p> Work hire </p>
	<span>
		<p> Don't work hire </p>
	</span>
	<ul>
		<li class="warning">Something went Wrong </li>
		<li>
            <p>Don't work hire </p>
        </li>
	</ul>
    <p> Work hire </p>
</div>

X + Y

This selector references to neighboring selector. It will only select the item that immediately follows the item previously mentioned. In this case, only the first paragraph after each div will have red text

div + p {
  color: red;
}

Will act as below

<div>
	<p> Don't work hire </p>
	<span>
		<p> Don't work hire </p>
	</span>
	<ul>
		<li class="warning">Something went Wrong </li>
		<li>
            <p> Don't work hire </p>
        </li>
	</ul>
    <p> Don't work hire </p>
</div>
<p> Work hire </p>
<p> Don't work hire </p>

X ~ Y

The general successor selector is similar to X + Y, but less strict. When a successor selector (div + p) selects only the first element immediately after the previous selector, this one is more general. It will choose, all p if they are afrer div

div ~ p {
  color: red;
}

Will act as below

<div>
	...
</div>
<p> Work hire </p>
<p> Work hire</p>
<span><p> Don't work hire </p></span>

.classOne.classTwo

This will work only if element has both classes defined

.classOne.classTwo {
  color: red;
}

<p class="classOne classTwo"> Work hire </p>

SCSS &

.classOne{
    &.classTwo{
        color: red;
    }
}

Will be rendered to:

.classOne.classTwo {
	 color: red;
}

If space is present then it will be as follow:

.classOne{
    & .classTwo{
        color: red;
    }
}

After compilation

.classOne .classTwo {
	 color: red;
}