This is impossible, disregard this question. Thanks for all the help.
Is there any way to select the text for something like this, and for the example we'll say I want to select the text duck:
<div id="derp">
<a class="irrelevant">duck cat woof</a>
</div>
Any help appreciated.
Edit: Apparently it felt like adding a jquery tag. Just css, sorry.
Edit again:
Short answer: not with css. What are you trying to do anyway? Add some context please. – Till 1 min ago
On reddit you have an ability to change the css of your 'subreddit'. But you can't alter any of the other code, only the stylesheet. So I basically want to be able to select a word of text that is unattributed within a div and be able to use content with a pseudoselector to add an image / text before or after some text matching 'xxx'.
Without using the ID or class, you could select it with $('div a').text(). This will give you the text of the first a in the first div.
Without any attributes there will be no way to specify a specific element.
You can try something like:
$('#derp').children('a').val();
This depends on the surrounding HTML. Is the a element the only child of #derp?
#derp > a /* a being the only a child */
#derp > a:first-of-type /* a being the first child */
You might also be able to use the attribute selectors:
#derp > *[attr="val"]
Check out the W3Cs Selectors Level 3 document for all available CSS3 selectors.
Related
I have two elements, author and citaion of inside a div like follow:
<div>
<h1>author</h1>
<h1>citation</h1>
</div>
If both author and citation exist, I put a comma between author and citation. If only one of them exists or none of them exists, I do not do anything.
Is there a way to do it in CSS or Sass only without JavaScript?
In CSS, you cannot manipulate an earlier sibling by checking the next one. The only way you can check if the second element is there and do something about it is selecting it.
You can solve it using pseudo-element :before. However, it may not be the way you want it because the two elements are on different lines (both <h1>).
So, if you want to make it without JavaScript, I would recommend to consider put both elements in the same line.
h1 span:nth-of-type(2):before {
content: ', ';
}
<h1>
<span>author</span><span>citation</span>
</h1>
I've the following issue: there is <select> option in my website, and it have 3 different logic data in one <option> which needs to be separated like this:
I was thinking about word-spacing, but as you can see there is some spaces in last data, so it will not work. :after and :before will be not good either. And as I know there is no way to insert <div> or <span> inside <option>. I was wondering is there any other ways to implement this, because currently I have only bad solution with .
If you want to present option elements in a tabular manner, as it seems, then the clumsy way of using no-break spaces and a monospace font seems to be the only way.
Consider using a different approach, such as a set of radio buttons with associated labels and other texts. Then you can use a table element.
I did a few changes to a library called Chosen ... I think it's just what you need.
DEMO
This is the usage in JS:
$('.chosen-select').chosen({
width: '250px',
html: function(option){
return $(option).data('html');
}
});
This question already has answers here:
CSS selector based on element text? [duplicate]
(3 answers)
Is there a CSS selector for elements containing certain text?
(20 answers)
Closed 9 years ago.
Get Here
I need to hide above link by using css (display:none).How can I select that (i.e. link with 'Get Here' text)
It isn't possible to target an element based on its content. but, it is possible to target an href based on its link:
Get Here
a[href="go/there.html"]{}
If you can have a value other than # in your href, this approach could work.
No, not possible for css. Css is made for styling elements, not selecting texts. You can do it with jquery though:
$("a:contains('Get Here')").hide();
Not with CSS, but using jQuery:
$("a:contains('Get Here')").hide();
or
$("a:contains('Get Here')").css('display','none');
You can't do that with CSS. But even if you could, you shouldn't have done it, really. Never. Even forget about using javascript for this (if it was up to me I would exclude :contains filter from jQuery). This is very-very bad approach to style things. Because tomorrow you change the link text and your code breaks. What you really need to do is to use classes:
Get Here
with the next CSS:
.get-here {
display: none;
}
If you need to do it automatically whenever that text appears (and you don't have control over the text), use jQuery as asku suggests.
If you have control over the text, it's much simpler to add a class to that link and style it. You can add the same class to all the links that need hiding.
HTML:
Get Here
CSS:
.hide {display: none}
With CSS3 you could also use a[rel="#"] {display:none}
I am facing issues writing a slightly complex CSS selector.
I want to select a div with "class" containing 'btn-group', but not 'open'
So I have something like;
div[class*='btn-group']:not([class='open'])
Now the issue is that there are around 5-6 elements that match the above condition. But I want to select the first out of that. How do I do the same?
Would prefer doing using nth-child..
What about: div[class*='btn-group']:not(.open):first-of-type?
[Edit]: This trick does not work if you have <div class="btn-group open"></div> as the first child... (as explained by #Jukka below) a JS-based trick will work, tho:
$("div[class*='btn-group']").not(".open").first()
.css({...});
// OR add a class
// .addClass("class");
http://jsfiddle.net/teddyrised/LdDCH/
try like this
div [class*='btn-group']:not([class='open']):nth-child(1) {
color:Red;
}
Using this you can select first child
Working Fiddle
You cannot. CSS selectors can’t be used that way. But if you provide a more specific HTML context (including containers for the div elements and a description of a pattern that the markup follows), there might be a way that works under some assumptions.
In particular, :nth-child and :nth-of-type only test whether the element is the *n*th child, or the *n*th child of its kind, of its parent. It does not take e.g. classes into account; the is no “nth of a class” selector.
is it possible to pick out and style a particular word in a paragraph using just css? So for example in the sentence "hello my name is nick, hello to you all", would it be possible to target the word "hello" wherever it appears and to add a rule, such as changing the color of hello anytime it appears? I don't want to have to add a span tag around every hello that appears.
I would like to do this in only css if possible. css3 is fine to use.
CSS has 2* Pseudo-Elements:
::first-line and ::first-letter. These are the only possibilities to target only a part of the innerhtml of a Tag.
(*ofc it has more, i mean for the purpose of selecting only a part of the innerhtml.)
No, you'd need to use javascript for that. Or, if you're using PHP/ASP...etc, you could add spans around any designated word(s) automatically before the page renders.
If you know the contents of the para and have patience you can wrap each of those words that you need to highlight in a span tag. Assign them the same class and then style it.
For fine control over any particular word, or fragment, you'd have to wrap it into a span and style the span, as others said.
However, there are also the :first-line and :first-letter pseudo-elements, available since CSS2. So, for example, you can have the first letter have a different font-size, and the whole first line have a different color, like this:
p:first-letter {font-size: 30px;}
p:first-line {color: #FF0000;}
What I know its not possible to target textnode, you can do it by using Javascript. Wrap the Hello word with a span tag and set the properties to the SPAN tag
CSS selectors work on tags or pseudo clases, not querying your text. Check the reference http://www.w3.org/TR/selectors/, maybe you can find something useful here.