I'm using the mark tag to highlight text in dynamically created HTML. I want to use one of two styles depending on a condition.
I am able to specify a CSS class this way:
<mark class='selected'>
But if I change this to use ng-class (without even adding my condition yet)...
<mark ng-class='selected'>
... the highlighting defaults back to the mark tag's default style and does not use my 'selected' class.
Are <mark> and ng-class incompatible?
Edit: Here's the code which hopefully will help clarify the issue.
In my MVC controller I query the database and receive text. I replace certain characters in the text with the mark tags to highlight the items the database has identified need to be highlighted, e.g.
fieldText = fieldText.Replace("\u0002","<mark>");
fieldText = fieldText.Replace("\u0003","</mark>");
This becomes part of the model passed to the template, which uses ng-bind-html to tie it to a span:
<span ng-class="{'selectedField': field.ID.startsWith($ctrl.fieldId) || $ctrl.fieldId == 'Type' + $ctrl.row.TxType}" id="field.ID" ng-click="$ctrl.elementClicked(field.ID)" ng-bind-html="$ctrl.format(field)"></span>
My CSS defines the style for <mark>:
mark {
background-color: yellow;
color: black;
padding: 0px;
text-decoration:underline;
font-weight: bold;
}
This works as far as it goes. But when the condition specified in the <span> tag shown above is true, I need to change the style of the <mark> text (and not to the same style as the rest of the span). So I'm trying to define the text in the MVC code to set the style conditionally:
fieldText = fieldText.Replace("\u0002","<mark ng-class=\"{'markSelected': $ctrl.isSelected(field.ID, $ctrl.fieldId)}\">");
But when I do this, the marked text reverts to the default <mark> system highlighting, ignoring both my mark style and my markSelected style.
ng-class is a directive that expects an expression. If you wanted to always use the same class you could do something like
<mark ng-class="value = 'selected'">
Related
Instead of creating a whole other id and ruleset, why can’t I just put multiple values (ex. font-family: cursive; color: blue) in a single ruleset? I tried it and it works and seems like a quicker way to do it. For example, if I want to change the font, color, and uppercase/lowercase of a title, can't I just put all those values into one ruleset?
The preferred way to do this is using Cascading Style Sheet (CSS). This allows you to edit the visual aspects of the site without having to deal much with the HTML code itself.
Explanation :
<[tag] style="[css]"> Content </[tag]>
Where [tag] can be anything. For example "p" (paragraph), "span", "div", "ul", "li".. etc.
and where [css] is any valid CSS. For example "color:red; font-size:15px; font-weight:bold"
The recommended way to add style to a html element is by assigning it a "class" (a identifier that can be repeated on the document) or a "id" a unique identifier that shall not be repeated in the document.
For example:
<[tag] id="element1" class="red"> Content </[tag]>
<[tag] id="element2" class="red"> Content </[tag]>
Where tag is any html valid tag. id is a unique arbitrary name and class is an arbitrary name that can be repeated.
Then in the CSS (inside the tags of your document):
<style type="text/css">
.red {
color:red;
}
#element1 {
background-color:black;
}
</style>
For this example and to keep it simple to new users I named the class "red". However class="red" isn't the best example of how to name . Better to name CSS classes after their semantic meaning, rather than the style(s) they implement. So class="error" or class="highlight" might be more appropriate. ( Thanks to Grant Wagner for pointing that out )
For a complete guide to CSS you can visit this link: http://www.w3schools.com/css/
Remember:
Keep your HTML Code clean and use CSS to modify ANY visual style that's needed. CSS is really powerful and it'll save you a lot of time.
Yes you can and it’s okay to do that.
Actually this is the right way!
so you create a ruleset with a specific selector, then you write all the properties that you wish and element to have (if the selector applies to the element)
I want to know if I am able to define a custom HTML attribute that can take 2 or more values just as the 'CLASS" attribute.
For instance, considering I define a "Data-Text" and in css I write:
[data-text=light]{color:white;}
[data-text=bold]{font-weight:bolder;}
Now, can I make a trick that if I write :
<p data-text = "light bold"> something </p>
both commands (font-weight and color) happen for the <p> tag?
it is possible when you use the css "~="
[data-text~=light]{color:white;} [data-text~=bold]{font-weight:bolder;}
this should work just fine.
How to assign values or string to p tag through CSS?
I am trying like this, why I am doing like this because I come from Android programming.
HTML file:
<p> </p>
CSS file:
p{
text:"today"
}
result should= "today" in browser
So please help me.
Although I can't see a reason why you can't just add the text to the HTML file, I will still answer your question.
There is no way to add text inside of the HTML tag. The only way that you can add text around HTML is through pseudo elements like the following:
p:before{
content: "today";
color: black;
}
This is not recommended however, due to the fact that the text won't actually exist in the html and will need to be styled to display properly.
A much better solution would be to use javascript
<script>
document.getElementById('todayTag').innerHTML = "today";
</script>
The 'todayTag' refers to an ID that will be placed on the p tag.
1)It is not possible in css,
2)Use jQuery or
$("p").html("today");
3)Use JavaScript
document.getElementsByTagName("P")[0].innerHTML = "Today";
note [0] is the index
You cannot do that via css alone, use javascript for that instead.
document.getElementById("demo").innerHTML = "text";
<p id="demo">
</p>
I was looking at some Polymer code (link) and stumbled upon something new to me: a dollar sign $ in an html attribute name e.g.
<div class="item" wide-layout$="{{wide}}">
Also, a CSS selector is used:
.item[wide-layout] .title { ... }
How is the $ sign interpreted in the element attribute ?
Thanks for your time folks!
Using $ on the element binds a property to an attribute. You can read more here.
wide in your scenario is probably a Boolean property on the element.
When wide = true, a wide-layout DOM attribute will be added to the element so it can be targeted via CSS.
The dollar sign tells Polymer that some code will change the attribute, may it be class or any specific property on a Polymer element.
The code can be a function or a simple variable.
Example:
<shopping-cart class$="[[colorDependingOnItem(onSale, typeOfBrand)]] row-element">
So the class can now change dynamically depending on what the method colorDependingOnItem returns, based on the two properties onSale and typeOfBrand.
I saw here square brackets that are used in class names:
<input class="validate[required,custom[onlyLetter],length[0,100]]" name="firstname" type="text" />
What do these square brackets mean?
The square brackets are used as an attribute selector, to select all elements that have a certain attribute value. In other words, they detect attribute presence.
Example 1:
img[alt="picName"] {width:100px;}
would affect only
<img src="picName.png" alt="picName" />
in your code, and won't affect
<img src="picName.png" alt="picName2" />
Example 2:
The following affects all elements with title attribute specified:
[title] {border:1px dotted #333;}
Example 3:
This CSS
p[class~="fancy"]
will affect the following html
<p class="fancy">Hello</p>
<p class="very fancy">Hola</p>
<p class="fancy maybe">Aloha</p>
but won't affect this:
<p class="fancy-fancy">Privet</p>
Example 4:
[lang|="en"]
will affect elements with lang attribute, which is hyphen-separated list of words beginning with “en”, like
<div lang="en">Tere</div>
<div lang="en-gb">GutenTag</div>
Examples 5, 6, 7:(CSS3)
The following attribute selector affects link elements whose href attribute value starts with the string “http:”.
a[href^="http:"]
The following attribute selector affects image elements whose src attribute values ends with the string “.png”.
img[src$=".png"]
The following attribute selector affects any input element whose name attribute value contains the string “choice”.
input[name*="choice"]
That is most likely used by some sort of validator or validation library. The class here means that validate this field denoted by validate keyword and then:
required it is required field
custom validation type; allow only letters
length should be between 0 to 100 chars
Well, this information is used by the jQuery validation library you posted the link to :)
Apart from the use-case / example given by the OP for brackets in class names, there is also another use case which Harry Roberts proposed (and later stopped proposing) in his blog a while back: grouping related classes in your markup where the square brackets could be used to group
two or more related class attributes to make them easier to notice
when scanning an HTML file
...
and that looks something like this:
<div class="[ foo foo--bar ] baz">
where:
There must be more than one ‘set’ of classes.
One ‘set’ must contain more than one class.
He also noted that adding the brackets is completely valid according to the html5 spec
There are no […] restrictions on the tokens authors can use in the
class attribute…
Just to reiterate:
The brackets in the class attributes - while being valid CSS class names are not actually meant to be used in the CSS1 - but rather to help readability in the HTML.
Notes:
1
Although technically, they can be used when escaped,
.\[ {
color: red;
}
<div class="[">Hi there</div>
Nothing. Brackets are a legal character for class names with no special meaning whatsoever.
In standard HTML, they have no particular meaning. It's just more text.
To the jQuery Validation plugin, they do.
Example:
[what-ever] {
color: red;
}
<p what-ever>Hello</p>
This will color Hello red. You can use square-bracket as class names
There is no particular rule within a class name. In your example they are almost certainly being used by a JavaScript validation framework. This is because in HTML you can't simply add your own attributes to tags, therefore the validation framework is exploiting the fact that CSS class names can contain such characters in order to 'store' the validation rules within the class name. There won't actually be any corresponding class in the style-sheet - this is just a trick to work around the limitations of HTML.