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.
Related
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');
there are two class that start with post-meta- like this.
<div class="post-meta-top"></div>
<div class="main-text"></div>
<div class="post-meta-bottom"></div>
Normally I must write like .post-meta-top, .post-meta-bottom, but if possible I want to write like .post-meta-*.
I know it's impossible with scss right now. My question is "Is there similar function in scss or in other css extended language?"
You can do this with the attribute selector
div[class^='post-meta-']
{
..
}
FIDDLE
From the w3c spec:
[att^=val]
Represents an element with the att attribute whose value
begins with the prefix "val". If "val" is the empty string then the
selector does not represent anything.
You can try jQuery to match multiple class,
<script>
$( "div[class^='post-meta']" )
</script>
The basic question I'm wondering about is what is preferred in terms of readability, reuse, coding style, etc. One thing to note is that this JSP could be used in multiple parts of a page, for this naive example lets say its just a div that needs to be styled a certain way and put on a page several different times.
I realize I could externalize the class to a shared CSS file, but this class will only ever be used by this part of the page, say for instance this box is the only one that will ever need to be purple in the entire product, in my opinion it doesn't make sense to dirty up a shared CSS in order to clean up my JSP. So what is better
Option 1 (Using ID selectors)
<% String contextName = request.getParameter("myContext"); %>
<style type="text/css">
#<%=contextName %>_myDiv
{
font-weight: bold;
background-color: purple;
height: 20px;
}
</style>
<div id="<%=contextName %>_myDiv">
<div>Blah Blah Blah!</div>
</div>
Option 2 (Using class selectors)
<% String contextName = request.getParameter("myContext"); %>
<style type="text/css">
.<%=contextName %>_myDiv
{
font-weight: bold;
background-color: purple;
height: 20px;
}
</style>
<div class="<%=contextName %>_myDiv">
<div>Blah Blah Blah!</div>
</div>
It seems to me that option 2 would make things easier to debug since they are using a shared class, however if there are (for example) 50 of these boxes on the page then it will result in this class being declared 50 times. Does this create extra leg work for the browser. Alternately if I use the ID selector method then I create 50 unique styles that do the exact same thing causing extra work for the browser to match up all the IDs.
So what is better? NOTE: both these ways work, I'm just looking for the pros and cons of each method.
You shouldn't have style elements in the body anyway, so you should put the style in a style sheet. As an id should be unique in the page, you would use a class.
If you don't want to do that, then there is no reason to have a style tag either. Just put the style in the element:
<div style="font-weight:bold;background-color:purple;height:20px;">
<div>Blah Blah Blah!</div>
</div>
If a style is used once, use an ID.
If a style is used more than once, use a class name. The class only needs to be declared once, but is referred to in any element using that class name.
Multiple class names can be used to handle variation from a "base" class.
In general, you should use an external stylesheet to allow the browser to cache the file.
You will want to use classes. This is because you may have more than one instance on the page of that object.
However, For what you are doing it would still be better to hard code your different style options and place them in a css file.
It does not have to be shared with other pages just link it directly on your given view. This will also keep you from having 50 duplicates of one style reference. Then just generate the class for that particular object.
You should check the hierarchy.
"ID are unique, Class is not unique"
check out this article
http://css-tricks.com/the-difference-between-id-and-class/
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;
}