I would like to know difference between these two lines:
p.intro a{color=# ff99ff;}
p .intro a{color=# ff99ff;}
In first example there is no space between p and .intro, while in second example there is space between them.
I want an explanation with examples.
The first is the class given to the p item.
<p class="intro">
Item
</p>
The second is the class given to the p tag's child.
<p>
<span class="intro">
Item
</span>
</p>
First rule is for
<p class="intro">some</p>
Second is for
<p><span class="intro">some</span></p>
OK, first p.intro a { color: #ff99ff; }
<p class="intro">This <a>link</a> is colored #ff99ff.</p>
<p>But <a>this one</a> is not.</p>
Any a tag within a p that has the intro class gets colored.
Then p .intro a { color: #ff99ff; }
<p class="intro">This <a>link</a> is colored normally.</p>
<p>And so is <a>this one</a>, but <span class="intro"><a>this one</a> is colored #ff99ff.</span></p>
<div>Also, <span class="intro"><a>this link</a></span> doesn't get colored either.</div>
Here, only a tags that are within anything that has the intro class, which is itself within some p, gets colored.
The first will affect all a tags that are descendants of p tags that have the class intro.
The second will affect all a tags that are both descendants of an element (any) with the class intro AND, at the same time, descendants of a p tag.
p.intro a
This finds all <a> that are decenents of <p class="intro">.
p .intro a
This finds all <a> that are decenents of any element with the class intro that are decendants of a <p>.
The first case will select all A tags there are nested somewhere below a P tag with class "intro".
<p class="intro"><div><a>This is selected</a></div></p>
The second case will select all A tags that are nested somewhere below any sort of DOM element with a class of "intro" which in turn is nested somewhere in the a P tag.
<p><div><div class="intro"><div><a>This is selected</a></div></div></div></p>
Note that the nested element do not have to be directly below the preceding elements in the selector. They just need to be nested somewhere within the preceding items in the selector.
p.intro a{
color=# ff99ff;
}
This will effect for <a> that are inside
example:
<p class="intro">
one
</p>
and
p .intro a{
color=# ff99ff;
}
This will effect for <a> that are inside the class intro which is inside <p>
example:
<p>
<span class="intro">
one
</span>
</p>
Related
Let's say I have this markup:
<div class="">
<p>First text</p>
<p>
<span>Hi</span>
<span class="bold">Bye</span>
</p>
</div>
If I use text-red-400 on the parent element, I see that all of the children become red.
However, when I use [&>.bold]:text-red-400, the span element that has bold class won't be changed.
What is wrong here?
Because > CSS selector is direct children only selector
The child combinator (>) is placed between two CSS selectors. It matches only those elements matched by the second selector that are the direct children of elements matched by the first.
Utility [&>.bold]:text-red-400 basically is equivalent of
.utility > .bold {
color: red;
}
Every direct child with .bold class will be red
<div class="[&>.bold]:text-red-400">
<p class="bold">I'm red</p>
<p>
<span>Hi</span>
<span class="bold">I'm not</span>
</p>
</div>
If you wish to target every .bold element just remove > selector and replace it with underscore _
<div class="[&_.bold]:text-red-400">
<p class="bold">I'm red</p>
<p>
<span>Hi</span>
<span class="bold">Me too</span>
</p>
</div>
DEMO
So if you want to change the text color for only the span element with bold class then you need to specify the position of the child element as well. You can try the following code:
[&>*:nth-child(2)]:text-red-500.
This is mentioned in the tailwind documentation a well for more help: tailwind doc
Given the following markup:
<div>
<p class="eventPerformanceDate">...</p>
<p class="eventPerformance">...</p>
</div>
I want to target the .eventPerformance paragraph if it is the only .eventPerformance paragraph within the div.
I am using the following CSS to try to do this but it is not working:
.eventPerformance:only-of-type {
border-bottom:none;
}
I am misunderstanding how :only-of-type works?
Like all the other CSS *-of-type selectors, the only-of-type selector works on the element's type and not the extra conditions attached with it. Here there are two elements of type p within the parent and hence it has no effect.
A selector like .eventPerformance:only-of-type means that an element which is the only one of its type under the parent must be selected and styled if it also has class='eventPerformance'. It does not mean select the only element with class='eventPerformance' and style it.
In the snippet, you can see how the selector affects the p within the second div wrapper as it has only one p element. It also affects the p within the third div wrapper because even though there are two elements with class='eventPerformance' there is still only one element of type p with that class. The h4 within the third div wrapper also gets selected because there is only one element of its type within the parent and it too has the class.
The only-of-type selector will select the only element of every single type as long as there is no type selector attached to it (like p:only-of-type, p.eventPerformance:only-of-typeetc).
In the fourth div wrapper, the p tag is not styled even though it is the only one of its type because it doesn't match the other half of the condition (that is, the class selector is not matched).
p, h4 {
border: 1px solid;
}
.eventPerformance:only-of-type {
border-bottom: none;
}
<h3>None of the elements selected - Not only one of its type</h3>
<div>
<p class="eventPerformanceDate">Paragraph 1</p>
<p class="eventPerformance">Paragraph 2</p>
</div>
<h3>Element is selected - Only p and has required class</h3>
<div>
<p class="eventPerformance">Paragraph 1</p>
</div>
<h3>Elements are selected - Both are only element of their type and have class</h3>
<div>
<h4 class="eventPerformance">Heading 1</h4>
<p class="eventPerformance">Paragraph 1</p>
</div>
<h3>Element is not selected - Only p but doesn't have required class</h3>
<div>
<p class="some-other-class">Paragraph 1</p>
</div>
I want to select all the <p> tag except the ones inside the div whose class is div-class. I tried the following and it didn't do the job.
<style>
p:not(.div-class p) {
color:red;
}
</style>
<p> a p tag outside the div </p>
<div class="div-class">
<p> a p tag inside the div </p>
</div>
<p> a p tag outside the div </p>
p:not(.div-class p) - this selector is not working.
You can use :not(.div-class) p to select all p tags that are not a descendant of an element with class='div-class'. The p:not(.div-class p) selector does not work because the :not pseudo-class takes only simple selectors as argument. You can refer here for the list of simple selectors.
:not(.div-class) p {
color: red;
}
.div-class p {
color: blue;
}
<p>a p tag outside the div</p>
<div class="div-class">
<p>a p tag inside the div</p>
</div>
<p>a p tag outside the div</p>
The approach provided by Shomz (in his deleted answer+) can also work for your case depending on the objective. If you can override the color for the more specific selector (the ones having the class) then that approach would be a bit more easier to understand and adopt.
However, if you can't override (or don't want to override) then this approach would be better. But the trouble is that if you don't override then :not(.div-class) p ends up selecting all p tags as body also doesn't have class='div-class'.
Selecting only the p which are not under an element with class='div-class' becomes very tricky when the p is not a direct child of element with class='div-class' and the p directly under body also need to be styled. The below snippet is a sample approach using a combination of selectors.
body > p,
body > *:not(.div-class) p {
color: red;
}
<p>a p tag outside the div</p>
<div class="div-class">
<p>a p tag inside the div</p>
</div>
<p>a p tag outside the div</p>
<div class="div-class">
<div class="some-inner-class">
<p>a p tag deep inside the div</p>
</div>
</div>
<div class="some-other-class">
<p>a p tag inside some other class div</p>
</div>
<div class="some-other-class">
<div class="some-other-inner-class">
<p>a p tag deep inside some other class div</p>
</div>
</div>
+ - The below is the approach that was originally provided in Shomz' answer. I am including it here just for context.
p {
color:red;
}
.div-class p {
color:blue;
}
<p> a p tag outside the div </p>
<div class="div-class">
<p> a p tag inside the div </p>
</div>
I am having a rather difficult time understanding this type of css selector show below, or at least how to apply.
p .intro a { color: yellow }
p .intro a { color: yellow }
It would style any (reading from right to left)
a tag
which is a descendant of any tag with a class (dot is a class selector) intro
which is a descendant of p tag
Example (note that the elements are not direct children, but descendants):
<p>
<span>
<span class="intro">
<span>
I am yellow
</span>
</span>
</span>
</p>
(fiddle)
This selector would match HTML similar to this:
<p>
<span class="intro">
I am yellow
</span>
</p>
Basically, a a tag inside of a tag with a class of intro inside of a p tag. They don't have to be direct children.
Your jsFiddle example fails because of symantics. Peep this: Nesting block level elements inside the <p> tag... right or wrong?
So what you can do is change your markup to, for example:
<p>
<span class="intro">
I AM yellow
</span>
</p>
or
<div>
<div class="intro">
I AM yellow
</div>
</div>
Would you please explain me the difference between these two CSS classes syntax:
.element .symbol {}
and
.element.large .symbol {}
I don't understand the difference between the two. The first line indicates two different classes to which are applied the same styles. But about the second, what's the meaning of '.large' which is written attached to '.element'?
.element .symbol
means .symbol inside .element
.element.symbol
means .element that has the class symbol as well.
So,
.element.large .symbol
means .symbol inside .element that has the class large as well.
I think you got a slight misunderstanding what the first one means.
.element .symbol {}
Means that those CSS settings are applied to any HTML element with the class .symbol that is inside an element with the class .element.
<div class="element">
<div class="symbol" />
</div>
In this example your first CSS entry would affect the <div> tag in the middle.
Your second example means that the first class requires two classes to be affected. Other than that it's equal to the first one.
<div class="element large">
<div class="symbol" />
</div>
So if the HTML looks like this, the CSS values will be applied to the inner <div> tag as well.
If you want to set CSS tags that apply for multiple classes separately then you need to split them up using a comma. So it looks like this:
.element, .symbol {}
Edit: By request the link to the documentation of the CSS selectors.
Using
.element.large
refers to an element with both classes:
<div class="element large"></div>
rather than a descendant of an element:
.element .large
meaning that in:
<div class="element">
<div class="large"></div>
</div>
only
<div class="large"></div>
is 'receiving' the styles.
Basically, being separated by a space implies two elements with a descendant relationship.
You would use .element .symbol this where you have an element inside of another element. For example:
<div class="element">
<i class="symbol"></i>
</div>
If down the road you wanted to differentiate some divs, you could add an additional class to target only those that differ, and target it with .element.large .symbol. So, for example:
<div class="element large">
<i class="symbol"></i>
</div>
In your second example, the first part of the selector is simply an element with two classes, as in <span class="element large"> or <span class="large element">.
In general, each part of a selector applies to one HTML element.
table[border].clname means a table with a border attribute and a class of clname, while table [border] .clname means an element with class clname, in an element with a border attribute, in a table.
(Edit: well, I say "one HTML element", but of course you can have more than one table that this applies to. You understand.)
Without whitespace, you are simply more specific with the selector. Because classes can appear several times in the html dom. But two or more classes in one element is rarer and therefore more precise.
Selectors with a whitespace (.a1 .b2) say search for the class a1 and see if there is a child or child-child element with the class b2 in this element.
An even higher degree of accuracy can be achieved with the >selector (.a1 .b2 > span). This states that only span elements should be taken into account which are direct children of the class .b2 located within an element with the class a1.
.a1 .b1 {
color: green;
}
.a1.a2 .b1 {
color: red;
}
.a1.a2 .b2 {
font-style: italic;
font-weight: bold;
}
.a1.a2 .b2 > span {
color: orange;
}
<div class="a1">
<div class="b1">Hello France</div>
<div class="b1">Hello Spain</div>
<div class="b2">Hello Sweden</div>
</div>
<hr/>
<div class="a1 a2">
<div class="b1">Bye France</div>
<div class="b1">Bye Spain</div>
<div class="b2">
Bye
<span>World</span>
</div>
</div>