Is it possible to select the content/text node of a tag using css selectors?
For example I have some content such <div><p class="x">Hello world</p></div>. How can I get/select the text node ("hello world") using CSS?
I know that I could get the p element using .x class selector and then use innerHTML with javascript but I would like to know if it's possible to get the exactly text node using CSS and just set the node data (which is basically text as the node is a text node). Is it possible?
No, it is not possible.
However, if you're trying to figure out how to select the text node with querySelector, do what #j08691 suggested:
document.querySelector('.x').textContent
That or
document.querySelector('.x').firstChild.nodeValue
should work.
Related
I want to get the text "Example" from between these tags, but I don't know how to do it.
I thought of using a "getElementsByTagName("em")" method, but I only need this content, not all the em tags.
This is the example:
<em>
::before
Example
::after
</em>
I think what you are after is: document.getElementsByTagName("em")[1].innerHTML
This will get the text out of the <em> at position 2
by using the selector [] you tell it which element number you want by index.
<em>1</em>
<em>2</em>
<em>3</em>
<em>4</em>
using document.getElementsByTagName("em")[1].innerHTML
would return the number '2' (javascript indexes start at 0)
Alternatively, use ID's and use getElementById() instead, much easier when you know where the fish is in the barrel...
is their a way to include an external document at compile time inline and inside a tag with text using jade/pug templating?
for example, something like:
p paragraph text content with #[span.icon #include path_to_file/icon.svg] inline svg thrown into the html document
but not this solution:
p paragraph text content with #[span.icon #[svg #[use(href='path_to_file/icon.svg')]]]
i know the later works, but i'm looking for a solution that doesn't use the use tag or an external reference
solution needs to result in importing the document inside the tag in between the words at compile time.
i've looked through the pug documentation many times. only things close to this are tag interpolation and block expansion, but they don't seem to allow for this situation specifically.
thanks!
You should be able to use the vertical bar without having to use string interpolation:
p
| paragraph text content with
span.icon
include path_to_file/icon.svg
| inline svg thrown into the html document
See tag interpolation here: https://pugjs.org/language/interpolation.html
Can I use :nth-child to select (and style) particular words in given HTML element? For example:
<h2 class="site-description">Four word long title</h2>
I'd like to change style -- change font-size and font-style of the first two words and make two following word wrap to another line -- without need to change HTML, to which I don't have access.
Is this possible with :nth-child?
If this is completely bad approach, then is there any other option to achieve this?
No it wont work with :nth-child
Because nth-child works only on child tags not on characters of string
if you cant change html try with jquery -
or refer this
Change color of selected text in a div using bootstrap & color picker
You can try this if you can edit html:
Separate the characters with span and apply css on that spans
Hope Helps
nth-child is applying on an html tag.
here you only have one html tags.
The possible would be to create a small js function or add a html tags for each of the words.
I would use the javascript solution.
Otherwise you could look with http://letteringjs.com/ if you are willing to accept another library.
I am parsing the html code of one site with Jsoup. I need to find some html elements that has an specific id but their parent´s tree is complicating me the task. So I would like to know if is it possible to search an specific html element without having to search first all of their parents.
For instance I am doing the next:
Elements el=elements.select(".scroller.context-inplay").select(".zone.grid-1-1").select(".grid-1").select(".module-placeholder");
I would likte to know if there is a simple way to get the same element I get with this code searching by its id
The id of an html element should be unique within the page. Some html that you find in the wild breaks this requirement unfortunately tough. However, if your html source follows the standard you can simply use the # css operator to select the element in question:
Element el = doc.select("#someID").first();
Alternatively you can directly use the getElmentById Jsoup method:
Element el = doc.getElmentById("someID");
Also, if you decide to go by class names as you suggest in your question, it is easy to combine all selects into one selector:
Elements els = elements.select(".scroller.context-inplay .zone.grid-1-1 .grid-1 .module-placeholder");
The spaces in the CSS selector mean that any subselector right of the space must be a child of the stuff on the left side.
On my page, I have custom styled hyperlinks, and I also have alot of hyperlinked images. I don't want these custom styles to appear on the hyperlinks that only contain images. Instead of adding a separate class (i.e "nostyle") to each hyperlinked image, can I somehow target the hyperlinked images from my stylesheet?
You cannot select the parent of a matched item in CSS directly. There are workarounds with js (e.g. Searching elements and applying class attributes to their parent nodes) but seems a bit clumsy. You would rather refactor your document structure to find out a slicker solution.
sure, just use
a img {
// your style here...
}
if you want to target only the images within a certain class of links, use
a.yourclass img {}
Based on what it sounds like you're asking for the answer is no. You can't go backwards in the CSS only forwards.
As Theo.T mentioned, you could have a JS work-around.
One idea is to do an element innerHTML check to see if the element has an <img> tag inside it and if it does, change the element.className = "nostyle"; but that's a messy workaround and by the time you get the syntax right in JS (and cross-browser) you could have re-factored your document.
no need for a anchor class.
a[rel="image"] img {}