This question already has answers here:
CSS difference between attribute selectors with tilde and star?
(3 answers)
Closed last month.
I have a html code snippet.
[title~="ab"] {
color: red;
}
<div title="ab">I am div</div>
<div>
<p>I am p1</p>
</div>
<p title="abc">I am p2</p>
<p>I am p3</p>
<div>
<p title="ab">I am p4</p>
</div>
I know css selector [title~=ab] should have select all title value which containing value ab, if this is correct, why I am p2 is not selected?
Thanks.
You need to use [title*="ab"] rather than [title~="ab"]. * is contains whereas ~ is contains word, as described here.
Related
I have some doubts about using nth-child. I would like to understand if it is possible to include multiple tags inside nth-child() instead of writing them each time. For example, I have 6 elements and I want to include the 2nd and 3rd element in nth-child to apply a class that changes background color.
I've tried blindly with nth-child(2, 3) but obviously it doesn't work. Then I looked at some references and realized that nth-child(n+otherNumber) can be used but I couldn't get it to work.
In addition to understanding how to sequentially include multiple tags, I would also like to understand how to include tags fired together, such as 3 and 5.
I'm relatively new to all of this, can anyone clarify? I appreciate any response, thanks for any help.
div.modal-content > p:nth-child(2) {
background-color: red;
}
<div class="modal-content">
<span class="close-button">Button Example</span> <!-- Is this counted as element 1 ? -->
<p>
Element 2
</p>
<p>
Element 3
</p>
<p>
Element 4
</p>
<p>
Element 5
</p>
<p>
Element 6
</p>
</div>
As said in the comments, you can not include multiple numbers with a comma, but you can do this:
div.modal-content>p:nth-child(2), p:nth-child(3) {
background-color: red;
}
This question already has answers here:
Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
(8 answers)
Closed 2 years ago.
I don't understand why the above is not making the text red.
Here is a link to my project: www.jordy.news
article p i.note:first-of-type {
color:red;
}
<article>
<p>
An example<i>¹</i> sentence with some<i>²</i> notes.
<br><br>
<i class="note">1. Some information.</I>
<br>
<i class="note">2. Some more information.</i>
</p>
</article>
first-of-type means exactly that. It doesn't mean first-of-everything-else-the-selector-says.
The first element of type i in the paragraph is <i>¹</i>, which doesn't match the .note part of the selector.
You need to wrap the text (An example<i>¹</i> sentence with some<i>²</i> notes.) in a tag, for example, in a span, in order to ignore it in css when referring to the first i.note.
You can refer to the second selector like this:
article p:not(span) > i.note:first-of-type {
color:red;
}
article p:not(span) > i.note:first-of-type {
color:red;
}
<article>
<p>
<span>An example<i>¹</i> sentence with some<i>²</i> notes.</span>
<i class="note">1. Some information.</i>
<i class="note">2. Some more information.</i>
</p>
</article>
This question already has answers here:
What does the "~" (tilde/squiggle/twiddle) CSS selector mean?
(3 answers)
What does the "+" (plus sign) CSS selector mean?
(9 answers)
Closed 3 years ago.
I have this html code
.......
<div class="list-rows> </div>
<div class="list-rows> </div>
<div class="cat-row"><span>Topics</span></div>
<div class="list-rows> </div>
<div class="list-rows> </div>
<div class="list-rows> </div>
Now i want to find all div with class list-rows but which come after this element
<div class="cat-row"><span>Topics</span></div>
div.cat-row +list-rows is not working
Combining the comment and the two previous answers:
Most of the class= attributes are missing their closing quotation marks.
The CSS list-rows isn't preceded by a . to indicate that it is a class.
The + (next younger sibling) in the CSS should be tilde~ (all younger siblings).
Use ~:
.cat-row ~ .list-rows {
...
}
See https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator
you need closing quotes on your class names in the html and you should use something like div.cat-row+.list-rows as a selector.
This question already has answers here:
CSS 3 nth of type restricted to class [duplicate]
(2 answers)
Closed 6 years ago.
I have this code and I can't figure out why the nth-of-type selector needs to be 2, not 1, for the first sibling of this type.
Here's a jsfiddle code: https://jsfiddle.net/xj5hvn16/
Can someone, please, explain this to me?
.flowbox .utm_registrars_code:nth-of-type(2) {
background-color: red;
}
<div class="flowbox freebox">
<div class="pholdcard18"></div>
<div class="flowcard14 utm_registrars_code">
<div class="content">
Content 1
</div>
</div>
<div class="flowcard14 utm_registrars_code">
<div class="content">
Content 2
</div>
</div>
<div class="flowcard14 utm_registrars_code">
<div class="content">
Content 3
</div>
</div>
</div>
That is because nth-of-type starts with the first element of a certain type, in your case a div, and not the first element with the selected class
The :nth-of-type() pseudo-class represents an element that has an+b
siblings with the same expanded element name before it in the document
tree, for any zero or positive integer value of n, and has a parent
element.
More info:
https://www.w3.org/wiki/CSS/Selectors/pseudo-classes/:nth-of-type
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type
nth-of-type does not mean nth-of-class!
The first element of type div is
<div class="pholdcard18"></div>
Hence your Content 1 element is the second and highlighted.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
I am learning HTML and CSS from a book and I've faced a problem with connecting between the ids and classes, can any one answer me when to use them?
<p id=”footer”>Please steal this page, it isn’t copyrighted in any way</p>
<p class="guarantee">
The book said : Giving an element an id is similar to adding an element to a class. The only differences are that the attribute is called “id”, not “class”, an element can’t have multiple ids, and you can’t have more than one element on a page with the same id.
but still not understand when to use them :P
thanks guys
classes are generally used to group elements together while ids are used to identify specific elements.
<div class="buttonContainer">
<button id="home">home</button>
<button id="about">about</button>
<button id="contact">contact</button>
</div>
<div class="buttonContainer">
<button id="email">email</button>
<button id="query">query</button>
</div>
another example
<div id="header">
<p class="title">Header Title Here</p>
</id>
<div id="footer">
<p class="title">Footer Title Here</p>
</div>
The quick answer is that an id should be used to identify a specific element on the page and all ids should be unique. A class, on the other hand can be used to identify multiple elements with the same or similar meaning.
You've already mentioned the main differences. But when it comes to the CSS #id selector, there are other things to consider:
See, for example:
<div id="mydiv" class="mydiv"><p>Hello there.</p></div>
CSS:
#mydiv {
color:red;
}
.mydiv {
color:blue;
}
This will yield red colored text because IDs are more specific and thus more relevant to CSS, they are a priority with respect to classes.
ID's are unique
Each element can have only one ID.
Each page can have only one element with that ID.
Classes are NOT unique
You can use the same class on multiple elements.
You can use multiple classes on the same element.
The 'id' attribute should be unique within the same webpage although it is possible to declare more than one element with the same id. There can't be more than one element with a particular 'id'.
There can be multiple elements on the page with the same 'class'. This is useful when you want, for example, apply same CSS style to several elements.
The 'id' is used, for example, in Javascript, for getting an element with a specified id, or when you want to apply a style to only that element.