I have an HTML string which contains, among CSS and HTML markup, some tags with CSS classes. How do I get the collection of classes?
I'd like to do:
htmlString.replace(patternForEveryClass, "somePrefix_"+capturedGroupIndex);
where the pattern must collect all classes into a tag, and capturedGroupIndex must be the index of the captured class.
This is the regex I have right now:
class="((\s|[a-zA-Z_-]{1}[\w-_]+)+)"
https://regex101.com/r/pI9nX2/2
Is there a way to collect all instances within the class="" attribute? I cannot use DOM JS, just string scrapping.
Related
Ive just come accross this on a website im working on.. its something ive not seen before and can't find any explanation of this anywhere so was hoping someone could explain.
So ive come accross an element that is marked up with 2 classes in the following format:
<div class = "class1, class2"></div>
Ive never seen multiple classes assigned to an element like this before.. it looks like a selector to me.. I would expect them to be added like this: (without comma)
<div class = "class1 class2"></div>
is this valid CSS I have just never come accross before or have i just found a slightly weird bug on the page?
Just to add a little bit of extra information than the other answers so far:
The correct syntax (like everyone is saying) is the second - space-separated.
If you use the first (comma separated), then the classes with a comma directly after them won't be applied, but any other class will. For example:
<div class="class1, class2">
will apply class2 only to the div.
<div class="class1 class2,">
will apply class1 only
<div class="class1 , class2">
will successfully apply both classes.
<div class="class1,class2">
will load neither
Note that this extends for more than two classes: class="class1 class2, class3" will apply class1 and class3, for instance.
It transpires that any class name you try to add which contains an invalid or unescaped special character (see Here and here) will not load, but it doesn't stop the other valid class names from loading. Because classes are space separated, the DOM interprets "class1, class2" as two classes class1, and class2, and determines class1, to be invalid as , is a special character in CSS.
According to specs the first one is invalid:
class = cdata-list [CS] This attribute assigns a class name or set of
class names to an element. Any number of elements may be assigned the
same class name or names. Multiple class names must be separated by
white space characters.
The second one is valid.
References
class attribute
The example is incorrectly syntax. The acceptable markup should be as follows
<div class = "class1 class2"></div>
Now comma separated is acceptable in a stylesheet
.class1, class2 {
some styling
}
But this is for handling a class totally different than the example displayed.
You can use a data-* attribute to assign classes to any element separated by comma and then use some JavaScript to automatically assign classes removing commas. Technically, the classes you store in data-classes attribute(suppose) is a string as a whole. You grab that string use string's split method to store the class names removing the commas from n-between and the run a for loop to assign the values to the rea 'class' attribute.
Here's the script I coded-
//helper function which returns all the elements matching the selector passed as the argument
function $$(selector) {
var elements= document.querySelectorAll(selector);
return [].slice.call(elements);
}
//select all elements having [data-classes] attribute and the do the stuff
$$("[data-classes]").forEach(function(el) {
var dataClasses= el.getAttribute("data-classes");
var classes= dataClasses.split(",");
for(var i=0; i<classes.length; i++) {
el.classList.add(classes[i]);
}
});
Now you can do like this-
<button data-classes="button,button-large,button-fancy">You Button</button>
(include no white space between commas/classNames)
NOTE: MAKE SURE THAT this script is included at the very top of everything in the <head> so that it's the first thing that runs when page is loaded, even before all the CSS files.
I have this strange code:
<h1>Firmware 0.6 <span="postdate">April 02, 2015</span>
</h1>
How can I change only this certain span that has ="postdate" in it with CSS?
The problem occurs in a widespread template in the posttime of for example: http://luebeck.freifunk.net/2015/01/07/announce-0.6.html
the main source in github is corrected already, But I wonder how to fix such with only access to the CSS file.
That's not valid HTML.
If you validate it using an HTML validator, you will receive the following:
an attribute specification must start with a name or name token
An attribute name (and some attribute values) must start with one of a restricted set of characters. This error usually indicates that you have failed to add a closing quotation mark on a previous attribute value (so the attribute value looks like the start of a new attribute) or have used an attribute that is not defined (usually a typo in a common attribute name).
For what it's worth, you can technically select it by escaping the =/" characters.
Unfortunately, this will also select all succeeding elements due to the syntax error in the HTML.
span\=\"postdate\" {
color: red;
}
<span>Other span</span>
<span="postdate">April 02, 2015</span>
<p>Some paragraph</p>
<span>Everything appearing after the invalid span will get selected due to the syntax error!</span>
Ignoring the weirdness and considering it just another span there's usually another way to select it as it has a unique place in the DOM (though what that is may be unpredictable with dynamically created content such as you get in a CMS).
I'm guessing you've thought to target any ancestor items with an id attribute or determine if there's a way to target it through ancestors without affecting sibling spans or spans that sit within a similar structure elsewhere? Basically - does it sit within a unique structure in some way?
If not then you could also try to target it through span:nth-child(5). There's also a fist-child and last-child. This may help uniquely target it within the overall structure. https://css-tricks.com/useful-nth-child-recipies/
You could also try to enter an inline script in the html view of the wysiwyg (a bad CMS may allow this!) which will allow you to check the content of spans and do something to if it matches (like add a class or id for a styling hook).
I have an ApEx report where i need to customize the css width of columns differently. For this I'm using the CSS Class attribute in the report:
The CSS Class assigned is as shown: WideColumn
And in the HTML header for the application page :
<style type="text/css">
.WideColumn {
min-width:100px;
}
</style>
This is not taking effect. In fact whatever css attributes are assigned, do not take effect.
I do not want to use the CSS Style section to specify 'display:block;min-width:100px;' due to certain limitations.
What is it that I'm missing out in the column attributes?
I've tried CSS Class within quotes too: 'WideColumn' Please suggest.
The custom row template can not deal with the CSS class definition. The CSS under "Column formatting" normally generates a span element with a class set to it, not the td element. Setting the "Element CSS class" for the element itself will not always help aswell. If your column type is a "Standard Report Column" then no extra html is created.
You also have no option of providing a substitution string in the template itself to create some output.
You could
add an extra column in the source query which will contain a class.
Use the column header in the row template to add this custom class.
alternatively use the class column in the html expression of the
column you want to change. Similar to standard output, you could use
<span class="#CLASSCOL#">#MYCOL#</span> to generate that html.
target the generated column with CSS. For instance, if your template
generates th elements and a headers attribute on td elements
(like in standard reports), you can target those columns much more
easily than fiddling with classes or html expressions. You might need
to adapt the template but it should be generally beneficial.
You can do this with some Javascript using the jQuery library built into APEX.
(WARNING: My Javascript isn't the world's most elegant!)
This worked for me:
1) In the "Function and Global Variable Declaration" attribute of the page create this function:
function setColWidths(colId) {
var maxWidth = 0;
$('th#'+colId).each (function (index) {
w = $(this).width();
maxWidth = Math.max(maxWidth,w);
});
$('th#'+colId).each (function (index) {
$(this).width(maxWidth);
});
}
2) In the "Execute when Page Loads" attribute of the page call the function for each column:
setColWidths('COL01');
setColWidths('COL02');
setColWidths('COL03');
How do I apply a class to the following so that I can apply a specific css style to it?
The rest of the consist of anchor tags so I can easily apply a class but where do I stick it on this #Html.RenderAction?????
<li>#{Html.RenderAction("CartSummary", "ShoppingCart");}</li>
RenderAction will output a PartialView so I guess your class attribute should be put in the view (the one you call from the method CartSummary in ShoppingCartController) or inside the <li> that call it (maybe with a DIV)
RenderAction does not support passing in an object containing html attributes, like most other MVC helper methods do, so you cannot apply a css class directly using this method. Either you can wrap the output of RenderAction in a div with your css class from the parent view, or you can add a wrapper div to the output of the action itself.
Why u don't want to use Cart (#ViewBag.CartCount)
Be simple.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
CSS: div id VS. div class
I am new to CSS and have general question: how do you decide wether it is better to use class selector or id selector?
The answers on this page are all good, but approach the difference from a more pragmatic point of view. Let me try an explain it to you from another point of view. The id you use when you define a conceptual entity of your page, for example a list of something, or a page footer or a navigational menu. Something of which you generally have merely one, as another wouldn't make sense or would be another type of entity. When you have a pattern of repeating entities, or element which serve the same purpose you tend to assign them a class, think about section headers, photos in a gallery etc. So the items in the previously mentioned list would all be assigned the same class name.
Note though, that merely for styling reasons you could do with just classes, never use a single id, and be perfectly fine. It doesn't matter whether your class is used just once, or many times.
From the W3C standards an id should only be used once on a page, while a class can be used multiple times.
"ID" definition from http://www.w3schools.com/tags/att_standard_id.asp
The id attribute specifies a unique id for an HTML element.
The id must be unique within the HTML document.
The id attribute can be used by a JavaScript (via the HTML DOM) or
by CSS to make changes or style the element with the specified id.
"Class" definition from http://www.w3schools.com/tags/att_standard_class.asp:
The class attribute specifies a classname for an element.
The class attribute is mostly used to point to a class in a style sheet.
However, it can also be used by a JavaScript (via the HTML DOM) to make changes
to HTML elements with a specified class.
Since an id should be unique on the page it is also accessed A LOT faster through javascript
Id must be unique, class is not. So it depends on how you want to section the page.
id identifies uniquely an element, so you use it when you have only one element with it (ex ...
the class is applied to a group of elements with same features.
best practice says id is unique in the whole html page
ID's should be used for single elements:
<table id="specialtable">
Classes should be used for multiple elements:
<h3 class="awesomeheader"> <!-- an awesome header -->
<h2 class="awesomeheader"> <!-- another awesome header -->
It's good to use an id when you only have one item that you need to style for. Ex:
<div id = 'myDiv>Text</div>
#myDiv
{
display: block;
}
But when you have multiple items that you want to style the same way (say on multiple pages with css file for example) it is faster (and better) to use a class
<div class = "MyDiv> text </div>
<div class = "MyDiv> more text</div>
.MyDiv
{
color: black;
}