I have this minor stupid point I have to cover with automated test, and its driving me crazy, I am not able to get the value of :before css element, the code is really simple as the test also, but I still need some help on it. Here is the code I have.
.text-currency-positive::before {
content: "+ ";
}
<div class="amount">
<span class="text-currency text-currency-positive text-monospace text-nowrap">
::before
100,00 €
</span>
</div>
Ok here we go:
<h1 class="element">The value of my pseudo element is: </h1> // see the class
Then we add the pseudo element:
.element:before {
content: '+NEW';
}
Now the JS:
var content = window.getComputedStyle(
document.querySelector('.element'), ':before' // target the classes pseude
).getPropertyValue('content'); // here we can get the computed styles/values
This is not enough, as this would return a string ..."+". So we do this:
var makeVar = content.replace(/"/g, ''); // replace the quotes with nothing
var firstLetter = makeVar.charAt(0); // here we get the value of first char after we have replaced the quotes
Display it:
var h1 = document.querySelector(".element");
h1.innerHTML += " content is: " + firstLetter;
If you do not replace the quotes with the regex, youll get "+" returned, but maybe that is what you want.
Cheers, link:
https://codepen.io/damianocel/pen/ooJqem
Related
I have a HTML document that looks like the following, and using only CSS I want to insert an asterisk before each line. For the first line, the following works:
p:before {
content: "*";
}
<p>
test
<br> test2
<br> test3
</p>
but I don't know how to add the asterisk before each subsequent line.
I've tried:
p:before {
content: "*";
}
p>br:after {
content: "*";
}
<p>
test
<br> test2
<br> test3
</p>
but it doesn't seem to work.
How can I accomplish this?
codepen: https://codepen.io/ds241/pen/QWQyPKY
So, you select this div with class quote, extract its innerHTML, and convert it to a string with the toString() method. You then split this string with <br> separater, which results in an array. You then map this array to include a * before the start of each new line word.
Finally, you join this array together using the same <br> separator, and set the innerHTML of your quote to this. The code ends up looking like this.
const quote = document.querySelector(".quote");
let innerHTML = quote.innerHTML;
const t = innerHTML.toString();
let s = t.split("<br>");
s = s.map((i) => {
return `*${i}`;
});
s = s.join("<br>");
quote.innerHTML = s;
Two ways to Make a Line Break with Unicode
First assign the following CSS:
Figure I
p {
white-space: pre;
}
The above applies to both techniques. The first way is to use
in HTML.
Figure II
<p>test1
test2
test3
</p>
The second way is to use ::before, content, and \00000a.
Figure III
p::before {
content: "\00002a test1\00000a \00002a test2\00000a \00002a test3\00000a";
}
p {
white-space: pre
}
.a::before {
content: "\00002a test1\00000a \00002a test2\00000a \00002a test3\00000a";
}
<p class='a'></p>
<p>
*test4
*test5
*test6
</p>
This is because all your content is inside one element. And with the pseudo-selector, you can only target the element, not its content.
let p = document.querySelector('p');
let res = document.querySelector('.res');
res.innerText = p.innerText;
<p>
test
<br> test2
<br> test3
</p>
<div class="res"></div>
You'll need to wrap each of the lines of text. Depending on how you're implementing you can accomplish this in many ways. You could wrap them in individual tags, or tags, or if it's a list consider and tags. This will allow you to apply the CSS to each line.
p:before {
content: "*";
}
p>br:after {
content: "*";
}
<p>test</p>
<p>test2</p>
<p>test3</p>
You are missing one more ‘:’
So the css for this p would be something like:
p::before {
content: "*";
}
p:before {
content: "*";
}
I'm practicing creating an API by scraping using cheerio. I'm scraping from this fairly convoluted site:
http://www.vegasinsider.com/nfl/odds/las-vegas/
I'm trying to target the text after these <br> tags within the anchor tag in this <td> element:
<td class="viCellBg1 cellTextNorm cellBorderL1 center_text nowrap"
width="56">
<a class="cellTextNorm" href="/nfl/odds/las-vegas/line-movement/packers-#-
bears.cfm/date/9-05-19/time/2020#BT" target="_blank">
<br>46u-10<br>-3½ -10
</a>
</td>
The code below is what i'm using to target the data I want. The problem I'm having is I don't know how to get that text after the <br> tags. I've tried .find('br') and couldn't get it to work. Here is the code:
app.get("/nfl", function(req, res) {
var results = [];
axios.get("http://www.vegasinsider.com/nfl/odds/las-vegas/").then(function(response) {
var $ = cheerio.load(response.data);
$('span.cellTextHot').each(function(i,element) {
// console.log($(element).text());
var newObj = {
time:$(element).text()
}
$(element).parent().children().each(function(i,thing){
if(i===2){
newObj.awayTeam = $(thing).text();
}
else if (i===4){
newObj.homeTeam = $(thing).text();
}
});
newObj.odds= $(element).parent().next().next().text().trim();
$('.frodds-data-tbl').find('td').next().next().children().each(function(o, oddsThing){
if(o===0){
newObj.oddsThing = $(oddsThing).html();
}
});
res.json(results);
});
});
You can see I am able to output all the text in this box to the newObj.odds value. I was trying to use something like the next line where I'm targeting that td element and loop through and break out each row into its own newObj property, newObj.oddsLine1 and newObj.oddsLine2 for example.
Hope that makes sense. Any help is greatly appreciated.
You can't select text nodes with cheerio, you need to use js dom properties / functions:
$('td a br')[0].nextSibling.nodeValue
Note $(css)[0] will give you the first element as a js object (rather than a cheerio object)
In my HTML I have element such as below
HTML:
<hmtl>
<head>
<style>
label::after {
content: " *"
}
</style>
</head>
<body>
<label> I'm mandatory</label>
</body>
</hmtl>
So what gets displayed on browser is:
I'm mandatory *
Query Selector
>getComputedStyle(document.querySelector('label')).content
<"normal"
So I see normal instead of *.
I can't see where is normal coming from. Is this the correct way to test content of ::after CSS selector?
I want to test that there's a "*" after the label, but can't seem to be able to get the value of "content" property correctly. Once I'm able to find it in using browser DOM API, I'd eventually want to test it in protractor.
Update
I found the answer at - Selenium WebDriver get text from CSS property "content" on a ::before pseudo element.
Now the question remains how I would test this on protractor.
Window.getComputedStyle()
The Window.getComputedStyle() method returns an object containing the values of all CSS properties of an element, after applying active stylesheets and resolving any basic computation those values may contain. Individual CSS property values are accessed through APIs provided by the object, or by indexing with CSS property names.
Syntax:
var style = window.getComputedStyle(element [, pseudoElt]);
element
The Element for which to get the computed style.
pseudoElt (Optional)
A string specifying the pseudo-element to match. Omitted (or null) for real elements.
The returned style is a live CSSStyleDeclaration object, which updates automatically when the element's styles are changed.
You can find a related discussion in WebDriver select element that has ::before
Usage with pseudo-elements
getComputedStyle() can pull style info from pseudo-elements (such as ::after, ::before, ::marker, ::line-marker.
As per the HTML, the <style> is as follows:
<style>
label::after {
content: " *"
}
</style>
Implemented as:
<label> I'm mandatory</label>
To retrieve you need to:
var label = document.querySelector('label');
var result = getComputedStyle(label, ':after').content;
console.log('the generated content is: ', result); // returns ' *'
Reference
CSS Pseudo-Elements Module Level 4
const label = document.querySelector('label'); // "normal";
console.log(label);
const labelAfter = getComputedStyle(label, ':after').content;
console.log(labelAfter == "normal");
label::after {
content: " *"
}
<label> I'm mandatory</label>
Since my question was specifically w.r.t protractor I'm posting the solution that I got working. Coming to the part I was stuck initially - why do I get "normal" instead of " *"
>getComputedStyle(document.querySelector('label')).content
<"normal"
So earlier I was unaware that ::after creates a pseudo child element inside the label element.
Inspecting <label> element in Chrome shows the below HTML
<label>
I'm mandatory
::after
</label>
If I click<label> element and checked the Computed tab, I could see that the value for content property is normal.
However, if I click on ::after pseudo-element, I can see in the Computed tab the value for content property is " *".
As mentioned in the other answers getComputedStyle() with the pseudo element as second parameter, is the only way to get value of CSS property for "::after". The crux of the problem is that protractor does not have an equivalent for getComputedStyle(), so we have to rely upon browser.executeScript() as shown below:
let labelHeader = 'I'm mandatory *';
// Passing label element separately as in the real test case, it would be extracted from parent
// enclosing element and need to be able to pass it as a parameter to browser.executeScript().
let label = element(by.css('label'));
browser.executeScript("return window.getComputedStyle(arguments[0], ':after').content",
label)
.then ((suffixData: string) => {
// suffixData comes out to be '" *"', double quotes as part of the string.
// So get rid of the first and last double quote character
suffixData = suffixData.slice(1, suffixData.length - 1);
labelText += suffixData;
expect(labelText).toBe(labelHeader);
});
If I have the following string: John Smith, how could I use CSS to set font-weight: bold on the second word in order to achieve: John Smith.
Can this be done in pure CSS?
Update: I am retrieving user's name from the server, so in my template it is #{user.profile.name}.
Since a js solution was suggested and pure CSS isn't presently possible: Live demo (click).
Sample markup:
<p class="bold-second-word">John Smith</p>
<p class="bold-second-word">This guy and stuff.</p>
JavaScript:
var toBold = document.getElementsByClassName('bold-second-word');
for (var i=0; i<toBold.length; ++i) {
boldSecondWord(toBold[i]);
}
function boldSecondWord(elem) {
elem.innerHTML = elem.textContent.replace(/\w+ (\w+)/, function(s, c) {
return s.replace(c, '<b>'+c+'</b>');
});
}
It cannot be done in pure CSS, sorry. But if you are willing to accept a JavaScript fix, then you might want to look into something like this:
Find the start and end index of the second word in the element's textContent.
Add contenteditable attribute to element.
Use the Selection API to select that range.
Use execCommand with the bold command.
Remove contenteditable attribute.
EDIT: (just saw your edit) I agree this is a bit too hack-y for most uses. Perhaps you'd be better off saving what the last name is as meta-data?
It seems to be impossible by using only pure CSS. However, with a bit of JS you could get there pretty easily:
const phrases = document.querySelectorAll('.bold-second-word');
for (const phrase of phrases) {
const words = phrase.innerHTML.split(' ');
words[1] = `<b>${words[1]}</b>`; // this would return the second word
phrase.innerHTML = words.join(' ');
}
<p class="bold-second-word">John Smith</p>
<p class="bold-second-word">Aaron Kelly Jones</p>
Here is my HTML:
small caps &
ALL CAPS
Here is my CSS:
.link {text-transform: capitalize;}
The output is:
Small Caps & ALL CAPS
and I want the output to be:
Small Caps & All Caps
Any ideas?
You can almost do it with:
.link {
text-transform: lowercase;
}
.link:first-letter,
.link:first-line {
text-transform: uppercase;
}
It will give you the output:
Small Caps
All Caps
There is no way to do this with CSS, you could use PHP or Javascript for this.
PHP example:
$text = "ALL CAPS";
$text = ucwords(strtolower($text)); // All Caps
jQuery example (it's a plugin now!):
// Uppercase every first letter of a word
jQuery.fn.ucwords = function() {
return this.each(function(){
var val = $(this).text(), newVal = '';
val = val.split(' ');
for(var c=0; c < val.length; c++) {
newVal += val[c].substring(0,1).toUpperCase() + val[c].substring(1,val[c].length) + (c+1==val.length ? '' : ' ');
}
$(this).text(newVal);
});
}
$('a.link').ucwords();
Convert with JavaScript using .toLowerCase() and capitalize would do the rest.
Interesting question!
capitalize transforms every first letter of a word to uppercase, but it does not transform the other letters to lowercase. Not even the :first-letter pseudo-class will cut it (because it applies to the first letter of each element, not each word), and I can't see a way of combining lowercase and capitalize to get the desired outcome.
So as far as I can see, this is indeed impossible to do with CSS.
#Harmen shows good-looking PHP and jQuery workarounds in his answer.
I'd like to sugest a pure CSS solution that is more useful than the first letter solution presented but is also very similar.
.link {
text-transform: lowercase;
display: inline-block;
}
.link::first-line {
text-transform: capitalize;
}
<div class="link">HELLO WORLD!</div>
<p class="link">HELLO WORLD!</p>
HELLO WORLD! ( now working! )
Although this is limited to the first line it may be useful for more use cases than the first letter solution since it applies capitalization to the whole line and not only the first word. (all words in the first line)
In the OP's specific case this could have solved it.
Notes: As mentioned in the first letter solution comments, the order of the CSS rules is important! Also note that I changed the <a> tag for a <div> tag because for some reason the pseudo-element ::first-line doesn't work with <a> tags natively but either <div> or <p> are fine.
EDIT: the <a> element will work if display: inline-block; is added to the .link class. Thanks to Dave Land for spotting that!
New Note: if the text wraps it will loose the capitalization because it is now in fact on the second line (first line is still ok).
JavaScript:
var links = document.getElementsByClassName("link");
for (var i = 0; i < links.length; i++) {
links[i].innerHTML = links[i].innerHTML.toLowerCase();
}
CSS:
.link { text-transform: capitalize; }
What Khan "ended up doing" (which is cleaner and worked for me) is down in the comments of the post marked as the answer.
captialize only effects the first letter of the word. http://www.w3.org/TR/CSS21/text.html#propdef-text-transform
You can do it with css first-letter!
eg I wanted it for the Menu:
a {display:inline-block; text-transorm:uppercase;}
a::first-letter {font-size:50px;}
It only runs with block elements - therefore the inline-block!
May be useful for java and jstl.
Initialize variable with localized message.
After that it is possible to use it in jstl toLowerCase function.
Transform with CSS.
In JSP
1.
<fmt:message key="some.key" var="item"/>
2.
<div class="content">
${fn:toLowerCase(item)}
</div>
In CSS
3.
.content {
text-transform:capitalize;
}
If the data is coming from a database, as in my case, you can lower it before sending it to a select list/drop down list. Shame you can't do it in CSS.
After researching a lot I found jquery function/expression to change text in first letter in uppercase only, I modify that code accordingly to make it workable for input field. When you will write something in input field and then move to another filed or element, the text of that field will change with 1st-letter capitalization only. No matter user type text in complete lower or upper case capitalization:
Follow this code:
Step-1: Call jquery library in html head:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
Step-2: Write code to change text of input fields:
<script>
$(document).ready(function(){
$("#edit-submitted-first-name,#edit-submitted-last-name,#edit-submitted-company-name, #edit-submitted-city").focusout(function(){
var str=$(this).val();
str = str.toLowerCase().replace(/\b[a-z]/g, function(letter) {
return letter.toUpperCase();
});
$(this).val(str);
});});
</script>
Step-3: Create HTML input fields with same id's you use in jquery code like:
<input type="text" id="edit-submitted-first-name" name="field name">
The id of this input field is: edit-submitted-first-name (It using in jquery code in step-2)
**Result:
Make sure the text will change after you move your focus from that input field at another element. Because we using focus out event of jquery here.
Result should like this: User Type: "thank you" it will change with "Thank You".
**
Best of luck
The PHP solution, in backend:
$string = 'UPPERCASE';
$lowercase = strtolower($string);
echo ucwords($lowercase);
I know this is a late response but if you want to compare the performance of various solutions I have a jsPerf that I created.
Regex solutions are the fastest for sure.
Here is the jsPerf: https://jsperf.com/capitalize-jwaz
There are 2 regex solutions.
The first one uses/\b[a-z]/g. Word boundary will capital words such as non-disclosure to Non-Disclosure.
If you only want to capitalize letters that are preceded by a space then use the second regex
/(^[a-z]|\s[a-z])/g
if you are using jQuery; this is one a way to do it:
$('.link').each(function() {
$(this).css('text-transform','capitalize').text($(this).text().toLowerCase());
});
Here is an easier to read version doing the same thing:
//Iterate all the elements in jQuery object
$('.link').each(function() {
//get text from element and make it lower-case
var string = $(this).text().toLowerCase();
//set element text to the new string that is lower-case
$(this).text(string);
//set the css to capitalize
$(this).css('text-transform','capitalize');
});
Demo
all wrong it does exist --> font-variant: small-caps;
text-transform:capitalize; just the first letter cap