With span:last-of-type I can select last span element of its parent. But is there any solution to select last element with any .class of its parent? Like:
div .myclass:last-of-type {
...
}
from:
<div>
<span class="myclass">One</span>
...
<i>text</i>
<b class="myclass">Two</b> <!-- this i want select -->
<b>more text</b>
<i>text</i>
<span>Three</span>
</div>
http://codepen.io/Chovanec/pen/lkojd
No, there is no way to do this. :nth-child and its ilk only apply to elements, not just general selectors. Therefore, .myclass:last-of-type will only work the way you want it to if the last <b> is selected. In your example, it won't work. Your only option is to change your markup somehow.
Related
What XPath expression will allow me to find an element in arbitrary position in a set of nesting <div>s and only those elements?
For example, how to find all the <a> elements except the last one in this HTML fragment:
<div id="0">
<a href="first.com"/>
<div id="1"></div>
<div id="2">
<div id="2.1">
<div id="2.11">
<a href="second.com" />
</div>
</div>
</div>
<div id="3"><a href="third.com" /></div>
</div>
<a href="dont_find_this_one.com" />
This XPath,
//a
will select all a elements in the document.
Update per requirements clarification comment:
This XPath,
//div[#id="0"]//a
will select all a elements under all id="0" div elements in the document.
Another way of writing it could be :
//a[ancestor::div[#id="0"]]
Select all anchor elements with a specific common ancestor (div with a specific attribute).
Other options, but more risky :
//a[parent::div]
Select all anchor elements with a div element as a parent.
(//a)[not(position()=last())]
Select all anchor elements except the last one present on the page.
I am new to css. Can someone help me in differentiating "#test" and "div#test"?
<html>
<head></head>
<body>
<div>
<span>Some stuff here..</span>
</div>
<div id="test">
<span>This is my data</span>
</div>
</body>
</html>
You really ought not to qualify an ID with a tagname per the MDN, as follows:
Don’t qualify ID rules with tag names or classes
If a rule has an ID
selector as its key selector, don’t add the tag name to the rule.
Since IDs are unique, adding a tag name would slow down the matching
process needlessly
The main difference is the specifity weight changes.
Doing #id is less specific than div#id
This means that your div#id rules are used because it has a higher specifity value
div#id {background: #000}
#id {background: #fff}
The background of the div with that id will be black, even if another rule is selected afterwards
#test will take the element with the id test while div#test will only take the div with an id named test.
This doesn't make a great difference since ids have to be unique.
This kind of info is pretty easy to find, you may want to take a look at W3schools documentation
#id & div#id differs only when applying styles to that element.
Browser calculates the most relevant element by calculating specificity.
specificity calculate rules are in the follwing link
https://www.w3.org/TR/CSS22/cascade.html#specificity
#id will be 0100
and div#id will be 0103
So what does the number means if you write
div#id {
background: green;
}
#id {
background: red;
}
the color of box will be green
reference:
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
The #id is Selects the element with id="firstname". It is one kind of CSS Selectors.
Check all CSS Selectors at https://www.w3schools.com/cssref/css_selectors.asp
There is a minor difference.
When you use div#id it will only apply to #id that are attached to a div. Otherwise the rule is ignored.
Hope it helps. Thanks
When you use div#id it will only apply to #id that is attached to a div.
Specificity of div#id is more than that of #div.
<html>
<style>
div#test {
background: green;
}
inspector-stylesheet:1
#test {
background: red;
}
</style>
<body><div>
<span>Some stuff here..</span>
</div>
<div id="test">
<span>This is my data</span>
</div></body>
<span id="test">This is my data</span>
</html>
Basically id's are unique but to show how the element is specific when used with combination div#id if there are two different elements with test for two different elements then the stronger would be the specified element like div#id
The specificity is different (div#test one is higher) and div#test applies to only a div, not other tags.
div#test specificity is 0101
#test specificity is 0100
Specificity Calculator
As you can see below, div#test is a selector only for divs with the id test. #test will select every element with the id test.
However, since you should never use an id multiple times, this should not be a problem. div#test will just slow down the matching in the DOM so you shouldn't use it.
Just to be clear: if you chain elements and ids, you are more specific. This means, these specifications will always override less specific ones.
div#test{color:green}
#test{color:red}
The color will be green.
If you meant div #test, that's for chaining through the DOM tree.
div#test{ float:right}
#test{color:green}
div #test{margin-left:60px}
<html>
<head></head>
<body>
<div>
<span>Some stuff here..</span>
</div>
<div id="test">
<span>This is my data</span>
</div>
<span id="test">no data</span>
<div>
<span id="test">heres data</span>
</div>
<div>
<p>
<span id="test">heres data aswell</span>
</p>
</div>
</body>
</html>
I am trying to select the first p element who's direct preceding sibling is also a p element. I have highlighted the below code with example of what i am looking for please.
<div class="vacancy-left">
<h2>Machine Operator / Print Operator</h2>
<h3>Vacancy Ref:</h3>
<p>I-1056</p>
<p>Are you self-motivated with a..</p> <!-- THIS NODE -->
<p>The ideal candid...</p>
<p>Hours of Work Monday- Friday 07.30-16.30</p>
<h3>Salary:</h3>
<p>Start pay from £8.00 per hour</p>
<p> Immediate Start</p>
<h2>Apply For This Vacancy</h2>
<p></p>
<p>Return to Industrial Vacancies</p>
</div>
I've tried a couple things such as .//p[preceding-sibling::p] but that selects a few p elements that have any preceding element as a p.
Thanks
You can use //p[preceding-sibling::*[1][self::p]] to select all p elements where the nearest preceding sibling element is also a p element, however it would select more than one p in your sample as several p elements have another p element as the nearest preceding sibling element.
This is my problem: I have to select and remove ALL the elements that follow one precise element.
Here an example of how my webpage is structured:
<h2>
<span class="myClass" id="Note">Note</span>
</h2>
<ol class="secondClass">...</ol>
<h2>...</h2>
<ul>...</ul>
<h2>...</h2>
<ul>...</ul>
<table class="tableOne">...</table>
<div class="otherClass">
In particular i have to delete ALL elements after <span class="myClass" id="Note">Note</span>
I read a lot of topic about the NextAll() Jquery Selector, but however I can't manage to solve my problem.
.nextAll() targets siblings and your span doesn't have any. Perhaps you should be targeting its parent. Eg,
$(".myClass").parent().nextAll().remove()
The problem is that nextAll only gets sibling elements. For a generic solution to this problem, if you use nextAll you would need to call it on the element and all parent elements:
$(".myClass").parents().andSelf().nextAll().remove();
this more a conceptual question. Recently i found myself to be more confident with this kind of html (example)
<div id="mainCont">
<div id="mainContFirst">Text <span id="mainContFirstSpan">option</span></div>
<div id="mainContSecond">Other Text</div>
</div>
Having all important tag marked with an ID you can easly write down css:
#mainContFirst {} etc
is this a bad pratice? Should I use just css selector? Is this faster then use selector?
Thanks
Grouping (edit)
Ok now What about elements that should have the same style?
let's say for example in every divs the second <span> should have font-size:10px; it's better this:
<div>
text text <span></span> <span id="firstDivSpan"></span>
</div>
<div>
text text <span></span> <span id="secondDivSpan"></span>
</div>
and then the css:
#firstDivSpan, #secondDivSpan {...}
Or like this?
<div>
text text <span></span> <span id="firstDivSpan" class="commonStyle"></span>
</div>
<div>
text text <span></span> <span id="secondDivSpan" class="commonStyle"></span>
</div>
.commonStyle{...}
What's better?
ID selectors are the fastest. That is not bad practice at all; you're simply operating under the assumption that there will only be one element with that ID on your pages.
That said you shouldn't abuse IDs for lame reasons like rendering performance. Use IDs to mark truly unique elements, not to mark everything so you can forget about stuff like descendant combinators, classes, groups etc. Those other selectors are what make CSS so powerful, not just the ID selectors.
Re question edit: there isn't any better one in this case. Performance issues aside (because they don't matter at all) it largely depends on the meaning of the selectors.
If your styles apply to any element with the .commonStyle class then use the class selector. If you only want to target those two specific spans regardless of the class then the ID selectors are more appropriate.
It is better to use the ID like in your example.
It is easier for the browser to fetch a particular ID element rather than have to find all parents, then descendants...
As someone expanded on my answer in a separate thread, article regarding this: http://www.css-101.org/descendant-selector/go_fetch_yourself.php
ID, class, element name - they are all CSS selectors.