what is the difference between this
<p class="class1 class2"></p>
and this
<p class="class1 class2"></p>
the second has an extra space between the classes. both are working fine.
but, will it create any problem while working with javascript or jquery etc?
Having spaces in classes like that should never make a difference, for the exception that some HTML validator might get picky about it. Naturally though, you should try to avoid it.
HTML accepts one space only and converts more than one space to one space. So when you write:
<p class="class1 class2"></p>
it's equal to:
<p class="class1 class2"></p>
Note:However better way is use one space.
.c1.c2 {
width: 350px;
height: 100px;
background-color: red;
margin: 10px;
}
<div class="c1 c2">I have more than one space.(We have same style)</div>
<div class="c1 c2">I have one space.(We have same style)</div>
There's no difference, in this case.
.test {
font-size: 25px;
}
.test2 {
color: red;
}
<div class="test test2">
Hello world
</div>
<div class="test test2">
Hello world
</div>
There won't be any issue, both are completely valid. But I don't think there is any need to put multiple spaces if they don't make any difference, even doing that will make your code look ugly. If you make this practice your habit, any professional developer won't be impressed from you after looking at your code.
As per w3 standard, this is not an issue
HTML Validator response
No it never create problem, But spaces use memory spaces in code.
But it you are performing manipulation of class string, It cause problem 100%.
Yes, there can be a difference. Consider this scenario: Only the text of the second paragraph will be colored red.
[class="class1 class2"] { color:red }
<p class="class1 class2">One space</p>
<p class="class1 class2">Two spaces</p>
Worth bearing in mind when you read nonsense like "HTML ignores extra spaces." (It doesn't) and "Have you tried it?" (How do you know you've covered all scenarios?)
Just as for text, Html ignores duplicate spaces.
If you try to inspect it, it will show the spaces (so as for text) – but your browser should be able to ignore.
Therefore – there is no difference between the two!
Look:
.class1 {
color : red;
}
.class2 {
color : blue;
}
<html>
<body>
<p class="class1 class2">ffff ff</p>
<p class="class1 class2">ffff ff</p>
</body>
</html>
Related
In my web app, I want to highlight a piece of text so that it looks like somebody has painted it with a certain color. The Medium app uses this effect, too.
(I would like to show an image of this effect here, but stackoverflow does not allow me to post it because I do not have enough reputation points, yet.)
What kind of CSS and/or HTML markup do I need to achieve this?
As a side note: My app is written with React.
You need to use the semantic <mark> tag for this:
<p>This is some <mark>marked text</mark>.</p>
You can then style it any way you want using CSS:
mark {
background-color: HotPink;
}
<p>This is additional <mark>marked text</mark>.</p>
There are many ways to do it:
Highlight using the HTML <mark> tag
Here is an example of <mark>highlighted text</mark> using the <mark> tag.
Highlight text with only HTML code
<span style="background-color: #FFFF00">Yellow text.</span>
Highlight text with CSS & HTML
body { background-color:green; }
.highlight { background-color:#FFFF00; }
p { background-color:#FFFFFF;
<span class="highlight">Highlighted Text</span>
it doesn't matter if the application is written in React on any other framework. You can always define a CSS for basic html tag, such as as #Salaman suggested.
You can use the example that #Salman provided, but I would suggest a small modification.
mark.hotPink {
background-color: HotPink;
}
<p>Do not forget to check out our <mark class="hotPink">hot new offer</mark> today.</p>
<p>Also, you can check out our <mark>standard offers as well</mark>.</p>
You can write a CSS for tag but you probably don't want to do it for every mark tag (because you don't know if some other part of the system might be affected by this. The best (and the safest) way to do this is to create a custom class (i.e. class="hotPink" and assign it to your mark.
Hope this helps, all best! :)
friends. I'm using atom to write html codes. Every time I input the word "p", it can generate 3-line codes automatically:
<p>
</p>
now I give a inline class to put two p elements in one line:
.inline {
display:inline-block;
}
<p class="inline">
Hi, friend
</p>
<p class="inline">
s
</p>
I want it shows "Hi, friends" in browser, but it shows "Hi, friend s" with a space between "friend" and "s".
I know the problem is that html treats a line-break as a space.So if I write the code as <p class="inline">Hi, friend</p><p class="inline">s</p>, then I can get the result I want. So I have two questions:
Can I avoid the needless space when write codes in multiple lines?（I tried to search on the web, only get the answer "No": Advanced HTML multiline formatting - removing not need spaces from new lines）
If No.1 can't, can I autocomplete the p element in only one line as <p></p> while using atom?(Actually, after autocomplete the codes, I can use Ctrl+J to join two lines. However, this only works for two lines(not 3 or more) and will change original line-break into a space)
Waiting for answers sincerely. Thanks.
Hi you can remove white space, see my fiddle here
you can do this by keeping in one line like this
<p>Hi, friend</p><p>s</p>
p{
margin: 0;
display: inline;
}
or by this method
<div class="parent1">
<p>Hi, friend</p>
<p>s</p>
</div>
p{
margin: 0;
display: inline;
}
.parent1 {
font-size: 0;
}
.parent1 p {
font-size: 16px;
}
Try display:table-cell - like this:
.inline {
display: table-cell;
}
<p class="inline">
Hi, friend
</p>
<p class="inline">
s
</p>
Final edit:
This answer was wrong and I know it is wrong. I'm leaving it for posterity because some of the information below is still useful.
Edit: forget everything I wrote below-- the problem is just that your CSS is set to display as inline-block, not inline.
.inline {
/*display:inline-block;*/
display: inline;
}
Check out this post:
How to remove the space between inline-block elements?
This is known, expected behavior for inline-block elements. And it's not just the space because of the new line in the element-- it happens even if they are on the same line, like so:
<p class="inline">Hi, friend</p>
<p class="inline">s</p>
There are known techniques for handling this behavior (see here and here -- none of it is super pretty, but it's the reality of the situation.
To summarize the above links, they are basically means of trying to remove the spaces in the editor in ways that aren't super hideous or painful My preferred method is commenting out the spaces, like so:
<p class="inline">Hi, friend</p><!--
--><p class="inline">s</p>
...but it's really up to preference.
Alternately, you can leverage other options like floats or flexbox to achieve what you are looking for.
The question I want to ask is, "Is it possible/good practice to refer to a child of an element that is not a direct child?"
For instance, if you have HTML like this:
<form class="formation">
<p>
<span>
<input class="phone input">
</span>
</p>
<p>
<span>
<input class="text input">
</span>
</p>
</form>
And you want to refer in CSS to the inputs only in that particular form, so you call the class of the form followed by the class of the inputs without referring to the elements in between, like this:
.formation .input {
width: 10px;
}
will this work properly?
I tend to think I've done this already on projects and it has worked properly but usually I refer to all the children in between (because I don't go that deep). But I'm currently working on a media query for a wordpress site that doesn't seem to be respecting this rule. Is this bad practice? Or is this downright incorrect? Thanks for all your help!
Yes, it is not only possible but also advisable to do so. Choose your selectors for your css rules as lean as needed to reduce dependency on your markup structure. This is not only wise for performance reasons, it also saves you quite some work in case your markup should ever change, e.g. later on you notice the span is not needed any longer and you remove it to keep your markup as clean as possible. In case you used the full DOM path to your .input you will then also have to adjust your css selectors. Same if for any reason in the future your <p> should become a <div>.
Just make sure you give the rules as much DOM context as necessary to not apply your rules to the same classed element in other contexts (if you have any at all, and if you want to apply a different set of style rules for it).
Yes, it'll work fine. What youv'e got with .form .input allows for any number of intermediate nodes between the two classes.
If you'd had .form > .input, then your CSS wouldn't match at all. > is the "immediate descendant" selector, so
.form .input { color: green }
.form > .input { color: red }
<div class="form">
<div class="input">This is red</div>
<div class="whatever">
<div class="input">This is green</div>
</div>
</div>
HTML:
<p class=menu_top>Title</p>
<p class=menu_top>Order</p>
<p class=menu_top>Position</p>
<p class=menu_top>Number</p>
How can I target just the first element?
Use the :first-child pseudo-class.
.menu_top:first-child {
your: rules;
}
http://jsfiddle.net/uKJcK/1/
Just as a point of note, the way you're structuring is going to cause you more work in the future, as well. It would be far better to have something like this:
<div class="menu_top">
<p>Title</p>
<p>Order</p>
<p>Position</p>
<p>Number</p>
</div>
(and more semantically-correct would be to make it an unordered list)
The repetition is not necessary, when you can simply spec in CSS like so:
.menu_top p {
//all my basic styles for each menu item
}
.menu_top p:first-child {
// specific styles for just the first menu item
}
Over-classing causes a load of rework in the future, and muddies the code. Use the cascade to your advantage; it cuts down on repetitive code, and makes it easier to override only the outliers.
i am trying to display a few labels with a fair bit of space in between them on the same line in an html document. This does work.
How to get this working in a nicer way?
<div>
firstlabel             secondlabel
</div>
You could wrap your 'labels' in <span> tags, give them classes, and add margin with CSS.
Example here: http://jsfiddle.net/peduarte/Rf5kB/
HTML
<div>
<span class="firstLabel">firstlabel</span>
<span class="secondLabel">secondlabel</span>
</div>
CSS
.firstLabel {
margin-right: 50px;
}
You should use a semicolon after  .
<div>
firstlabel secondlabel
</div>
Try this:
<div class="main">
<div class="left">firstlabel</div>
<div class="right">secondlabel</div>
</div>
.main{
width:220px;
}
.left{
width:110px;
float:left;
text-align:left;
}
.right{
width:110px;
float:right;
text-align:right;
}
Sorry but this is a really freaky way to do that. Why don't you place those Labels in <p>-Tags and format the spacing via margin,padding ?
The correct non breakable space entity is , you forgot the semicolon at the end (;). A better way, however, to achieve what you want to do would be to enclose firstlabel and secondlabel in <span> tags and use css to make them stand apart, like suggested by peduarte.
Whether it works depends on the browser; the correct notation is with a semicolon (as mentioned by nyarlathotep). But no-break spaces give you very rough control. A better approach is to use CSS, e.g.
<div><span style="padding-right: 5em">firstlabel</span>secondlabel</div>
You can tune the padding-right value, using whatever units are suitable for your context. But generally, the em unit is most suitable, as it means that the spacing is automatically scaled when font size is changed.
I'm surprised that no one suggested the simple inline style:
<div style="margin-right: 500px;">firstlabel</div>
<label >Subscription Expiry: 2019=04-30 00:00:00<br><br></label>
Subscription Type: paid