I am a bit confused about the nth-of-type pseudo class, and how this is supposed to work - especially as compared to the nth-child class.
Maybe I have the wrong idea, but given this structure
<div class="row">
<div class="icon">A</div>
<div class="icon">B</div>
<div class="label">1</div>
<div class="label">2</div>
<div class="label">3</div>
</div>
..the third child element (first with class label) should (perhaps?) be selectable with
.row .label:nth-of-type(1) {
/* some rules */
}
However, at least in chrome here, it doesn't select it. It only appears to work if it is the first child in the row, which is the same as nth-child - therefore, what is the difference between this and nth-of-type?
The nth-child pseudo-class refers to the "Nth matched child element", meaning if you have a structure as follows:
<div>
<h1>Hello</h1>
<p>Paragraph</p>
<p>Target</p>
</div>
Then p:nth-child(2) will select the second child which is also a p (namely, the p with "Paragraph").
p:nth-of-type will select the second matched p element, (namely, our Target p).
Here's a great article on the subject by Chris Coyier # CSS-Tricks.com
The reason yours breaks is because type refers to the type of element (namely, div), but the first div doesn't match the rules you mentioned (.row .label), therefore the rule doesn't apply.
The reason is, CSS is parsed right to left, which means the the browser first looks on the :nth-of-type(1), determines it searches for an element of type div, which is also the first of its type, that matches the .row element, and the first, .icon element. Then it reads that the element should have the .label class, which matches nothing of the above.
If you want to select the first label element, you'll either need to wrap all of the labels in their own container, or simply use nth-of-type(3) (assuming there will always be 2 icons).
Another option, would (sadly) be to use... wait for it... jQuery:
$(function () {
$('.row .label:first')
.css({
backgroundColor:"blue"
});
});
in the picture out of added 10 elements, 8 are <p> and 2 are <i>, the two shaded part elements are indicating <i> remaining eight are <p>
the css for the page goes here:
<style>
* {
padding: 0;
margin:0;
}
section p {
width: 20px;
height: 20px;
border:solid 1px black;
border-radius: 15px;
margin:20px;
float: left;
}
section i {
width: 20px;
height: 20px;
border:solid 1px black;
border-radius: 15px;
margin:20px;
float: left;
}
section p:nth-child(1) {
background-color: green; /*first-child of p in the flow*/
}
section i:nth-child(1) {
background-color: red; /*[first-child of i in the flow]NO */
}
section i:nth-of-type(1) {
background-color: blue; /*the type i of first child in the flow*/
}
</style>
</head>
<body>
<section>
<p></p>
<p></p>
<p></p>
<p></p>
<i></i>
<p></p>
<i></i>
<p></p>
<p></p>
<p></p>
</section>
</body>
the first green bulb indicates
section p:nth-child(1) {
background-color: green; /*first-child of p in the flow*/
}
and second red bulb in the code does not work because i is not first elements in the flow
section i:nth-child(1) {
background-color: red; /*[first-child of i in the flow]NO */
}
and the blue bulb in the picture indicates the first type of i in the flow
section i:nth-of-type(1) {
background-color: blue; /*the type i of first child in the flow*/
}
.label:nth-of-type(1)
"type" here refers to the type of element. In this case, div, not to the class. This does not mean the first element which is .label, it instead means the first element of its type which also has a class of label.
There are no elements with a class of label which are at index 1 of their type.
Heres's a simple example which shows the difference between nth-child vs nth-of-type.
Consider the following html
<div>
<p>I am first</p>
<div>I am secong</div>
<p>I am 3rd</p>
</div>
Using nth-of-child
p:nth-of-child(2){
background:red;
}
The red background will be applied to the 2nd p element inside the div.
This happens because nth-of-child bascially means to find nth p tag(in this case 2nd p tag) inside a container
Using nth-child
p:nth-child(2){
background:red;
}
Here no css is applied.
This happens because nth-child basically means to find nth tag inside a container(in this case 2nd tag is div) and check if it is p tag
Here is an example:
<div>
<div >0</div>
<div >1</div>
<div >2</div>
<div >3</div>
<div >4</div>
<div >5</div>
</div>
this selector: div div:nth-child(1) will select the first child of the div but with another condition that child must be a div.
here first child is a <div>0</div> but if the first child was a paragraph p: <p>0</p> this selector will not effect the page because there is no first child div the first child is p.
but this selector: div div:nth-of-type(1) if the first child was a <div>0</div> will effect it, but if the first child is <p>0</p> now he will effect the second child <div>1</div> because it's the first child of his type div.
element:nth-of-type(p) //p=integer , basically return the DOM Element with respect of body.
Let us understand this with an example
<html>
<head>
</head>
<body>
<div>
<p> This is paragraph in first div</p>
<input type="text" placeholder="Enter something"/>
<p>This is a paragraph </p>
</div>
<div>
<p>This is paragraph in second div</p>
<ul>
<li>First Item</li>
<li>Second Item</li>
<li>
<label> This is label <strong>inside Unordered List</strong></label>
</li>
</ul>
</div>
</body>
</html>
**This above html will look like this.**
Now suppose We have to style Second Item in UnOrderd list.
In this case we can use nth-of-type(index) selector wrt DOM body.
we can achieve styling like this
<style type="text/css">
div:nth-of-type(2) li:nth-of-type(2){
color: red;
font-weight: bold;
}
</style>
explanation : div:nth-of-type(2) by this we are trying to tell find the second div in html body,after that we have second div accessible ,now we can dig inside div using same nth-of-type selector,next we are using li:nth-of-type(2) so now we can find second list inside second div and styling it .
Final Code :
<html>
<head>
<style type="text/css">
div:nth-of-type(2) li:nth-of-type(2){
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<div>
<p> This is paragraph in first div</p>
<input type="text" placeholder="Enter something"/>
<p>This is a paragraph </p>
</div>
<div>
<p>This is paragraph in second div</p>
<ul>
<li>First Item</li>
<li>Second Item</li>
<li>
<label> This is label <strong>inside Unordered List</strong></label>
</li>
</ul>
</div>
</body>
</html>
**And Final output will look like this**
:nth-of-type is used to select a sibling of a particular type.
By type I mean a type of tag as in <li>, <img>, <div> etc.
:nth-child is used to select children of a particular parent tag without regard to a type
Example of :nth-of-type
HMTL:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
<li>Item 13</li>
<li>Item 14</li>
<li>Item 15</li>
<li>Item 16</li>
</ul>
CSS:
Notice that there is no space between the <li> tag and the pseudo-class nth-of-type.
li:nth-of-type(odd) { background-color: #ccc; }
Result:
https://jsfiddle.net/79t7y24x/
Example of :nth-child
HTML:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
<li>Item 13</li>
<li>Item 14</li>
<li>Item 15</li>
<li>Item 16</li>
</ul>
CSS:
Notice here that there is a space between the <ul> tag and the :nth-child pseudo-class
ul :nth-child(even) { background-color: red }
Result: https://jsfiddle.net/o3v63uo7/
Related
I am a bit confused about the nth-of-type pseudo class, and how this is supposed to work - especially as compared to the nth-child class.
Maybe I have the wrong idea, but given this structure
<div class="row">
<div class="icon">A</div>
<div class="icon">B</div>
<div class="label">1</div>
<div class="label">2</div>
<div class="label">3</div>
</div>
..the third child element (first with class label) should (perhaps?) be selectable with
.row .label:nth-of-type(1) {
/* some rules */
}
However, at least in chrome here, it doesn't select it. It only appears to work if it is the first child in the row, which is the same as nth-child - therefore, what is the difference between this and nth-of-type?
The nth-child pseudo-class refers to the "Nth matched child element", meaning if you have a structure as follows:
<div>
<h1>Hello</h1>
<p>Paragraph</p>
<p>Target</p>
</div>
Then p:nth-child(2) will select the second child which is also a p (namely, the p with "Paragraph").
p:nth-of-type will select the second matched p element, (namely, our Target p).
Here's a great article on the subject by Chris Coyier # CSS-Tricks.com
The reason yours breaks is because type refers to the type of element (namely, div), but the first div doesn't match the rules you mentioned (.row .label), therefore the rule doesn't apply.
The reason is, CSS is parsed right to left, which means the the browser first looks on the :nth-of-type(1), determines it searches for an element of type div, which is also the first of its type, that matches the .row element, and the first, .icon element. Then it reads that the element should have the .label class, which matches nothing of the above.
If you want to select the first label element, you'll either need to wrap all of the labels in their own container, or simply use nth-of-type(3) (assuming there will always be 2 icons).
Another option, would (sadly) be to use... wait for it... jQuery:
$(function () {
$('.row .label:first')
.css({
backgroundColor:"blue"
});
});
in the picture out of added 10 elements, 8 are <p> and 2 are <i>, the two shaded part elements are indicating <i> remaining eight are <p>
the css for the page goes here:
<style>
* {
padding: 0;
margin:0;
}
section p {
width: 20px;
height: 20px;
border:solid 1px black;
border-radius: 15px;
margin:20px;
float: left;
}
section i {
width: 20px;
height: 20px;
border:solid 1px black;
border-radius: 15px;
margin:20px;
float: left;
}
section p:nth-child(1) {
background-color: green; /*first-child of p in the flow*/
}
section i:nth-child(1) {
background-color: red; /*[first-child of i in the flow]NO */
}
section i:nth-of-type(1) {
background-color: blue; /*the type i of first child in the flow*/
}
</style>
</head>
<body>
<section>
<p></p>
<p></p>
<p></p>
<p></p>
<i></i>
<p></p>
<i></i>
<p></p>
<p></p>
<p></p>
</section>
</body>
the first green bulb indicates
section p:nth-child(1) {
background-color: green; /*first-child of p in the flow*/
}
and second red bulb in the code does not work because i is not first elements in the flow
section i:nth-child(1) {
background-color: red; /*[first-child of i in the flow]NO */
}
and the blue bulb in the picture indicates the first type of i in the flow
section i:nth-of-type(1) {
background-color: blue; /*the type i of first child in the flow*/
}
.label:nth-of-type(1)
"type" here refers to the type of element. In this case, div, not to the class. This does not mean the first element which is .label, it instead means the first element of its type which also has a class of label.
There are no elements with a class of label which are at index 1 of their type.
Heres's a simple example which shows the difference between nth-child vs nth-of-type.
Consider the following html
<div>
<p>I am first</p>
<div>I am secong</div>
<p>I am 3rd</p>
</div>
Using nth-of-child
p:nth-of-child(2){
background:red;
}
The red background will be applied to the 2nd p element inside the div.
This happens because nth-of-child bascially means to find nth p tag(in this case 2nd p tag) inside a container
Using nth-child
p:nth-child(2){
background:red;
}
Here no css is applied.
This happens because nth-child basically means to find nth tag inside a container(in this case 2nd tag is div) and check if it is p tag
Here is an example:
<div>
<div >0</div>
<div >1</div>
<div >2</div>
<div >3</div>
<div >4</div>
<div >5</div>
</div>
this selector: div div:nth-child(1) will select the first child of the div but with another condition that child must be a div.
here first child is a <div>0</div> but if the first child was a paragraph p: <p>0</p> this selector will not effect the page because there is no first child div the first child is p.
but this selector: div div:nth-of-type(1) if the first child was a <div>0</div> will effect it, but if the first child is <p>0</p> now he will effect the second child <div>1</div> because it's the first child of his type div.
element:nth-of-type(p) //p=integer , basically return the DOM Element with respect of body.
Let us understand this with an example
<html>
<head>
</head>
<body>
<div>
<p> This is paragraph in first div</p>
<input type="text" placeholder="Enter something"/>
<p>This is a paragraph </p>
</div>
<div>
<p>This is paragraph in second div</p>
<ul>
<li>First Item</li>
<li>Second Item</li>
<li>
<label> This is label <strong>inside Unordered List</strong></label>
</li>
</ul>
</div>
</body>
</html>
**This above html will look like this.**
Now suppose We have to style Second Item in UnOrderd list.
In this case we can use nth-of-type(index) selector wrt DOM body.
we can achieve styling like this
<style type="text/css">
div:nth-of-type(2) li:nth-of-type(2){
color: red;
font-weight: bold;
}
</style>
explanation : div:nth-of-type(2) by this we are trying to tell find the second div in html body,after that we have second div accessible ,now we can dig inside div using same nth-of-type selector,next we are using li:nth-of-type(2) so now we can find second list inside second div and styling it .
Final Code :
<html>
<head>
<style type="text/css">
div:nth-of-type(2) li:nth-of-type(2){
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<div>
<p> This is paragraph in first div</p>
<input type="text" placeholder="Enter something"/>
<p>This is a paragraph </p>
</div>
<div>
<p>This is paragraph in second div</p>
<ul>
<li>First Item</li>
<li>Second Item</li>
<li>
<label> This is label <strong>inside Unordered List</strong></label>
</li>
</ul>
</div>
</body>
</html>
**And Final output will look like this**
:nth-of-type is used to select a sibling of a particular type.
By type I mean a type of tag as in <li>, <img>, <div> etc.
:nth-child is used to select children of a particular parent tag without regard to a type
Example of :nth-of-type
HMTL:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
<li>Item 13</li>
<li>Item 14</li>
<li>Item 15</li>
<li>Item 16</li>
</ul>
CSS:
Notice that there is no space between the <li> tag and the pseudo-class nth-of-type.
li:nth-of-type(odd) { background-color: #ccc; }
Result:
https://jsfiddle.net/79t7y24x/
Example of :nth-child
HTML:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
<li>Item 13</li>
<li>Item 14</li>
<li>Item 15</li>
<li>Item 16</li>
</ul>
CSS:
Notice here that there is a space between the <ul> tag and the :nth-child pseudo-class
ul :nth-child(even) { background-color: red }
Result: https://jsfiddle.net/o3v63uo7/
I know this should be a stupidly easy topic, but I'm confused and I spent way longer than I should trying to understand this example that my professor gave us.
From what I understand, the rules are supposed to be that you go first for inline css, then document css, then external css, and then priority. The priority was from what I thought 100*IDs+10*Class+1*Element reference.
Here is the code that's really confusing me below:
<div id="id1">
<ul>
<li class="c1" id="id2">Item 1</li>
<li class="c2 c3">Item 2</li>
<li class="c3">Sublist:
<ul>
<li class="c1">Subitem 1</li>
<li class="c2">Subitem 2</li>
<li class="c2" id=”id3”>Subitem 3</li>
</ul></li>
<li>Item 4</li>
</ul>
<div id="id4">
<ul>
<li id="id5">One thing</li>
<li id="id6" class="c2">And another thing</li>
<li id="id7" class="c1">A third thing.</li>
</ul>
</div>
</div>
<style>
div > li
{
color: yellow;
}
.c2
{
color: red;
}
ul li+li+li
{
color: green;
}
#id1, #id4
{
color: orange;
}
#id7
{
color: blue;
}
</style>
In the above code though, item 2 is red, sublist(+subitem1) are green, etc. How is that possible? Why isn't everything coming out orange? Shouldn't the #id1 style be applied to everything automatically since it is the only one with an ID specifier(and everything is a child of div with id="id1"?
The priority formula you wrote is ok if you have two rules to same element.
In css child element inherits from parents the colors, like in your example.
If new rules, despite having a lower specificity number, is applied to child, this override the inheritance.
Anyway read this: https://css-tricks.com/specifics-on-css-specificity/
An element's style overrides it's inheritance.In cases when a style was not defined we will prefer inherited value over default.
There is misunderstanding.
It did orange at first place to all tags .but later as some of the tags are defined different according to css, then it changes to specified color that you mentioned in css.
For CSS types:
http://webdesign.about.com/od/css/qt/aatypesofcss.htm
edited.
HTML:
<div class="ancestor1">
<div class="ancestor2">
<div class="ancestor3">
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>....
</ul>
</div>
</div>
</div>
Ancestor 1 is for some reason set to width: 100% of it's parent element and it must remain like that. I want the list items to ignore the widths of ancestors 2 & 3 and equally share ancestor 1's width with equal padding between them. The list items must cover the width of ancestor 1 with padding included. You may suggest altering the width of ancestor 2 and 3 in order to achieve the effect but not ancestor 1. Ancestor 1 must have width set to 100%.
I suppose, that you able to use the flexbox to solve your problem. You can read this guide to find the other examples of using this nice approach. But I should notice, that this approach has one disadvantage, it is not complete supported by the old browsers.
The solution is presented below:
HTML:
<div class="ancestor1">
<div class="ancestor2">
<div class="ancestor3">
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>....
</ul>
</div>
</div>
</div>
CSS:
.ancestor1 {
width: 100%;
}
.ancestor1 ul {
display: flex;
padding: 0;
}
.ancestor1 ul > li {
flex-grow: 1;
display: inline-block;
text-align: center;
border: solid red 1px;
}
https://jsfiddle.net/y3ob5Ldk/1/
There is a nested list, which looks like this:
Main-Title
Title 1
Element 1
Element 2
Element 3
Title 2
Element 4
HTML
<ul>
<li>Main Title
<ul>
<li>Title 1
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
</li>
<li>Title 2
<ul>
<li>Element 4</li>
</ul>
</li>
</ul>
</li>
</ul>
Is it possible to display the list with CSS like this or do I have to change the HTML markup?
Main Title Title 1 Element 1
Element 2
Element 3
Title 2 Element 4
This looks more like a table with rowspan. I tried to do that with inline-flex:
CSS
li {
display: inline-flex;
}
But that doesn't work properly. Also there would be multiple elements like main title and so on.. the width of the 'cells' should be fixed.
JSFiddle: https://jsfiddle.net/mkc4uh9y/1/
This doesn't work for Safari.
And the list should be continued for multiple main elements. Here it will displayed to the right: https://jsfiddle.net/mkc4uh9y/4/
yes, reset sub li display:
li {
display: inline-flex;
}
li li {
display:flex;
}
https://jsfiddle.net/mkc4uh9y/2/
How do I rewrite this HTML to validate to XHTML 1.0 Strict?
<div>
<a href="link.html">
<p>Some text</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</a>
</div>
My intent is to have the entire div serve as a clickable link. The content within simply describes the contents of the destination page. W3 Validator says I can't have a block element (<p>) inside a span tag (<a>).
How do I rearrange this so that my DIVs remain block links?
You're not allowed to wrap a block level element in an inline level element so you have a few alternatives.
You can wrap every line that you want linked in the ...
<div>
<p>Some text</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
You can add a javascript onclick function to reproduce the same results.
//jQuery
$('div').click(function() {
window.location = 'link.html';
});
//Non jQuery
document.getElementById('yourDiv').onclick = function() {
window.location = 'link.html';
}
If you use the Javascript, make sure you use CSS to make it apparent that the contents are links. I'd recommend pseudo classes
div {
text-decoration: underline;
color: #0000FF;//or whatever your link color is
}
div li:hover, p:hover {
color: #CC00FF;
cursor: pointer;
}
You can't rearrange it to make the block a link. What you could do is to make every single element in the block a link, or you can use javascript.
<div style="cursor:pointer" onclick="location.href='link.html'">
<!-- ... -->
</div>
As is, your fragment is valid HTML5. Use that instead and your problem vanishes. All you have to do is change the doctype to <!doctype html>.
Your <UL> is also a block element, so it won't work there either. How about:
<div onclick="location.href = 'link.html'">
<p>Some text</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>