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.
Related
In my textbook I'm reading about HTML and how you shouldn't use a lot of <div>'s but starting to use bootstrap, you have to use div's on forms and such. Is this rule particularly an old one? What other tags can I use that behave like <div>
Take a look at this image.
Source: http://html5doctor.com/lets-talk-about-semantics/
Any tag can "behave like div".
Div's are easy to use because they have almost none default styles attached but in real world you can reset any element (for example h1) to look just the same as div.
To avoid divitis just google for semantic elements.
If it's paragraph use p, if it's group of fields in form you have fieldset, maybe it's just a label. Don't think how it looks by default because you can change it.
I'm trying to dynamically set a FontAwesome glyph inside a span or a button through the CSS property attr(property).
What I would like to have is to set an attribute on the tag
<button glyph="\f005"></button>
and then use it in the CSS file like this
button::before{
content: attr(glyph)
}
But it looks like it doesn't work and it just display the code I've written in the tag. Is there a way to "render" the code or to make the CSS consider it as an escaped character?
Take a look at this Fiddle for a quick example.
Try setting the value of the glyph attribute to a HTML entity, such as glyph=""
First of all, your CSS should be button::before or button::after, not only button. You can use content only in these.
Second, in HTML, you write entities like &XXXX;, not \XXXX, you mixed it up a little. Imagine it that the entity becomes single character and then it is transferred into CSS, not in another way. In HTML, you need to use HTML entities and in CSS, use CSS entities, even though they will travel through both languages in some way.
And third, don't use non-standard attributtes like glyph. They should be prepended with data-.
See http://codepen.io/ondrakoupil/pen/XbBvzV
I have a page where I am reading an HTML from email.
Sometimes, the text which comes from the email has HTML and CSS and it changes my page style completely.
I don’t want my page style to be impacted because of this. How do I read the HTML and CSS strictly inside a particular div (box) and not let the page get impacted by this?
you have to write your css using some parent > child format. You might have to use !important.
May be you are using some kind of common selectors like "a", "p", "div". In these cases we can prevent the overriding by using parent class/id or with "!important.". I will not recommend the second one.
Ex. using parent className:
.parent-classname p{
/*style here*/
}
put that div in iframe so it behave like a seperate window so your html content not effected by loadded css.
You can use <iframe></iframe> tag instead of the <div></div>. Using Parent>Child Css format will also help make your styles more unique and protect them from being overridden.
Basically, I'm looking for the cleanest way to modify the styling of some text that i have in the application views without having to reprogram them.
I have a lot of section that does not have any tag (text without tag in the view).
Is there a way to apply styling to that specific text? (Solution for the short term, before I redefine correctly the tags in the while views)
Except for a small number of narrowly defined places, you can't apply CSS to anything other than an element.
So: No, there isn't.
You cannot add style to a something that doesn't have an element. A simple div tag can change that, and its a really easy and quick fix. Just div a section, give it an id or class, then modify it using css.
if you want to modify the first line you could use:
p:first-line {
font-weight: 700;
color: green;
}
otherwise you'll have to wrap the text in a tag. Other psuedo elements you could use are here: http://www.w3schools.com/css/css_pseudo_elements.asp
I'm using html & css.
I want a certain word to always be set to the colour red.
I can use the span tags to set one word to red, but I don't want to have to type this out for every occurance of the word, is there kind of like a "global" way of doing this?
Thanks.
Lets say the word is "cat" btw.
You can't. CSS styles elements, not arbitrary bits of text.
You could programatically modify the document (either server side or with client side JS) to add additional markup (e.g. <span class="cat"> and </span>) around the words you care about (being careful to only alter words in regular text nodes and not in CDATA sections or attribute values.
I think you need to do this either manually or with Javascript using regular expressions. A good jQuery plugin is http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html