Can it be used inside an a tag?
a.x:first-letter
{
color:red;
}
My name is <a class=x>Lionel</a>
I can't seem to make it work.
According to css2.1 :first-letter applies only to block container elements.
Yes, that should work fine.
Can you provide a JSFiddle example of it not working?
It certainly should work -- See here for a test page which demonstrates it in action, and here for a browser compatibility chart (it says it should work in any browser).
[EDIT]
As #SilentGhost says, it only works for block level elements, which <p> is and <a> isn't.
You can make inline elements like <a> act as block elements by using the display:block; style. However this can mess up your page layout.
Fortunately, there is a half-way house option: display:inline-block; which should make your element get treated as a block element without disrupting your page layout. Try adding that to your stylesheet as follows:
a.x {
display:block;
}
Your :first-letter style should now work.
Related
<div> defaults to block
<span> defaults to inline
Is there one that defaults to inline-block?
If not, what special tag name would be appropriate for me to apply 'inline-block' using CSS?
Or should I stick to using a class?
From what I can tell the <img> tag is the only inline-block by default. To be on the safe side I would recommend a class, you never know when changing all elements of a certain type will come back to bite you. Or, you could always make up your own tag and assign display:inline-block; to it. This way you aren't changing the default functionality of standard elements...
EDIT
It also appears that button, textarea, input, and select elements are also inline-block
Sources:
According to this img is inline-block http://dev.w3.org/html5/markup/img.html#img-display
And here claims that button, textarea, etc. are as well: http://www.w3.org/TR/CSS2/sample.html
EDIT #2
While the source above claims that img tags are inline-block it seems (thanks to Alohci) that they are just inline http://jsfiddle.net/AQ2yp/
The following were tested in Firefox:
button is inline-block: http://jsfiddle.net/GLS4P/
textarea is inline: http://jsfiddle.net/235vc/
input is inline: http://jsfiddle.net/RFKe8/
select is inline-block: http://jsfiddle.net/5B4Gs/
Is there one that defaults to inline-block?
Strictly speaking, no there isn't. The W3 HTML specifications do not ever specify default CSS property values for any elements. They do provide a "default style sheet" for HTML 4, but developers are only encouraged to use it - it is not a requirement or any sort of mandate. The HTML 5 specifications indicate "typical default display properties" but, again, those are not required (also keep in mind that HTML 5 is still a working draft anyways).
So that leaves all default values up to the browser and how the developers actually feel elements should be displayed to a user. No one can guarantee that a specific element will display as inline-block or any other way in someone's browser. You should always explicitly set that if you want it to happen. Don't rely on "defaults."
If not, what special tag name would be appropriate for me to apply 'inline-block' using CSS? Or should I stick to using a class?
This is up to you and how you are designing your pages. You should always use elements that are semantically appropriate to the content contained within them. If the element will always be used in a context which will require inline-block display, by all means set it to that in your style sheet. Otherwise, you will have to resort to classes or more specific selectors in order to make your elements display properly.
Here is a Fiddle that gets the default display value for a majority of HTML tags.
Fiddle
In chrome, the default inline-block elements are: "INPUT", "BUTTON", "TEXTAREA", "SELECT"
My solution to this is declaring what I call a slice.
CSS
sl {
display: inline-block;
}
Usage
<sl>inline block stuff</sl>
You can check my codepen with all HTML elements and their display property by default. Some tags are syntax-broken, but it does not matter for our purpose.
Currently, there are 5 elements with display: inline-block in FF :
<button>
<select>
<meter>
<progress>
<marquee>
And additional 2 (including 5 above) in Chrome:
textarea
input
In principle, it depends on the browser what the default value for the display property is for each element. Even HTML5 drafts do not prescribe what values must be used, though it presents “expected rendering” of elements in terms of CSS.
According the default style sheet for HTML in the CSS 2.1 specification, the elements that have display: inline-block by default are button, input, select, and textarea. Browsers use such settings, except that in Firefox, this only applies to button and select.
In the Rendering section of HTML5 CR, the meter and progress elements are additionally describes as having inline block as “expected rendering”, and browsers that have implemented these elements appear to behave that way. The keygen element is also described as being an inline block, but Firefox does not do that (it implemented keygen internally as select in the DOM); IE does not support keygen at all; Chrome implements it as suggested.
Since all of these elements have rather specialized meanings, functionality, and rendering idiosyncracies, none of them is adequate for general use as an element that is an inline block by default and may have various meanings. What you can use for such an element is normally span or div, depending on whether you prefer inline or block as the default rendering.
Now you can create a Custom Element (for example: <inline-block> or whatever) that will have its CSS property display set to inline-block by default.
customElements.define( 'inline-block', class extends HTMLElement {
constructor() {
super()
this.attachShadow( { mode: 'open' } )
.innerHTML = `<style> :host { display: inline-block } </style>
<slot></slot>`
}
} )
#hw { background-color: lightblue }
<inline-block id="hw">Hello World</inline-block>
button, textarea, input, and select default to inline-block.
In the event you would want to inline-block a div you'd give it a class name.
.inline-block {
display: inline-block
}
Then...
<div class="inline-block"></div>
CORRECTION
I was mistaken about img. It seems it defaults to inline and not inline-block
This isn't really a true answer to the question right now, but with enough support, it may someday be.
<seg> short for "segment". As in, segments of a line.
with the polyfill:
<style> seg { display: inline-block; } </style>
It really would be nice if there was an official one, but there is not, so here is the best (IMO) suggested name for such an element that I know of.
YES there is an element that defaults to inline.
The answer is the span element.
<span>
Ok, I have read a lot of times that inline elements should never contain block elements. I agree, there are problems with that and it can get messy after. But I find it the only solution to do the following:
I'm trying to create an HTML template that imitates the Metro UI "tiles" (yeah, the one that is in windows 8). The tiles are made using <li> elements. Now, the problem is that I want the tiles (the whole <li> tag) clickable, but proper HTML tells me you can't surround a block element with an inline element. Besides, you can't surround an <li> with an <a>. Is there any method of doing this without going against the rules of html?
A legal and clean way of accomplishing this is to use a style of inline-block for the A tags and let them fill the complete LI.
LI > A
{
display: inline-block;
}
OR
LI > A
{
display: block;
}
This will work in IE7+, and all recent versions of Firefox, Chrome, Safari, Opera, etc.
Note that in the current draft of HTML 5, it is legal to put a greater variety of elements inside an anchor tag than was previously allowed (see "permitted content" and examples): http://dev.w3.org/html5/markup/a.html
Additional article: http://html5doctor.com/block-level-links-in-html-5/
If you have a look at the stackoverflow menu you will see it is quite easy. You put a <a> inside a <li>, put it to display block and give it the padding you want to achieve the block feel.
I'm generating a page for an upcoming portal site, and I've got an HTML element with some optional content. I'd like the element to not render if it is empty, but adding some padding to it causes it to render. How do I add padding to the content, but only if content is present?
.someElement{padding-top: 5px;}
HTML in question:
<div class="someElement">With padded content</div>
<div class="someElement"><!-- shouldn't render since it has no content --></div>
Basically, I'd like the second element, above, to not take up any space. I'm testing in all major browsers, using XHTML 1.1 doctype.
You can do the trick with the CSS3 pseudo-class :empty
.someElement
{
// your standard style
}
.someElement:empty
{
display:none;
}
Sadly Internet explorer doesn't support that feauture yet. For all the other browsers it shall do just fine...
Give the element an id attribute. You can then use Javascript to check it's innerHTML property once the page has loaded. If innerHTML has a length of zero, then you can set it's display property to none. This page might help if you don't know your javascript.
This is still a mucky way to play. If you know the element shouldn't be rendered before you serve the page it would be better to omit it altogether. If you don't want to omit the element, just hide it, then force it into hiding; style="display: none"
<style>
.someElement{padding-top: 5px; display:table;}
</style>
<div class="someElement">With padded content</div>
<div class="someElement"><!-- shouldn't render since it has no content --></div>
Adding display:table; should do the trick.
Give the empty element a different class (say someHiddenElement) when you are generating the content. Then add someHiddenElement { display: none } to your style sheet.
If it's necessary to have the div.someElement in the HTML, the best CSS/HTML way to do that would be to add an extra div around the added content that has the padding property
.someElement > div{padding-top:5px;}
<div class="someElement"><div>Content</div></div>
Otherwise, do as Pekka says, or take a look at having javascript do it for you.
I can't think of a CSS only way to do that.
I would try to decide whether the element is rendered at the time I know whether there will be any content in it. That is probably the cleanest solution.
Don't use padding on container, use margin on content. Than when there is no content, container remains invisible.
At the point where you populate the optional div, if there is no text to put in it, try changing the CSS display property to none. According to this source (and others), display: none removes the element completely from the document. It does not take up any space, even though the HTML for it is still in the source code.
Is there an "invisible" tag in HTML (4) that I can use to make CSS distinctions
tag.myclass tag.mysubclass h1 { }
without having any visual impact on the HTML rendered?
My background is that I have areas in a form that belong to different groups. As I am opening those in lightboxes (long story involving DOM operations and such, not really important) I don't want to rely on the usual div class=x or span class=y to style the subsequent elements, as I would have to reset margins here, paddings there, and so on.
A layout-neutral wrapping tag would be just what I need in such situations.
No, there is not.
(And that's because such an element wouldn't really fit into the rest of HTML. The only reason DIV and SPAN affect the surrounding area is because they're block and inline elements, respectively. What would an 'invisible' element be? If you need something that's completely independent, absolutely (or relatively) position it and give it a higher z-index.)
If you want to group elements use a div or a span tag as a wrapper element. Apply your id or class to this, and style it accordingly.
EDIT
There isn't an 'invisible' tag - but margins and padding can be easily reset 'margin: 0; padding: 0;'
While all browsers give default styling to many HTML tags, at it's core HTML only describes data, it doesn't format it.
What you're probably looking for is a DIV tag, because no browser gives any default styling to that tag.
I think you want a <fieldset>.
I'd say a span tag is as neutral as they come. I don't think there's any browser that applies a margin nor a padding and it just wraps around it's contents.
I suspect you can use <object> tag without usual attributes for that purpose, but I haven't tested it thoroughly yet. It's even in HTML5 (unlike FONT tag).
The right answer is use a div tag and define a class for it. Here is an example:
<h2 style="font-size: 14px">Project 1 - Project 2
<div class="username">{% if request.user.is_authenticated%} Welcome {{request.user.username}} {% endif %}</div>
</h2>
then in your css file you can have a class like this:
.username {
color:white;
float:right;
padding-right: 100px;
}
voila!! It all belongs to h2 tag but the user name has a different css applied.
You can add display: none; to it. That won't display it (obviously).
I'd like to change this:
<a href='foo'>
<div> Moo </div>
</a>
to be standards compliant (you're not supposed to have block elements in inline elements). Wiring javascript to the divs just for navigation seems like a hack and degrades accessibility.. In this case, my requirements are for 2 sets of borders on my fixed-dimension links, so the above non-compliant code works perfectly after applying styles.
Also, is "a { display:block; }" a legal way to circumvent the validation?
Why not use a <span> rather than a <div> and set display:block on both elements?
Additionally, to answer your latter question: I don't believe adding display:block; to your anchor will make it pass validation. The validator checks to see if you're following (X)HTML rules, not how to present the page to the user.
You may want to consider putting the div outside the a if it is only for display purposes, unless it's important that the outer border be clickable. Either this:
<div class="dbl_border_links">Blah text</div>
or this:
<a class="dbl_border_links" href="blah"><span>Blah text</span></a>
will work and you can use something like this:
<style>
.dbl_border_links, .dbl_border_links>* {
display: block;
border: 1px solid;
padding: 1px;
}
.dbl_border_links {
border-color: red;
}
.dbl_border_links > * {
border-color: blue;
}
</style>
to specify the styles. Personally I'd go with the div containing the a but either approach works.
I normally consider the <a > tag to be a special case for this purpose. You ought to be able to apply that to just about anything- it is after kind of the whole point of hypertext (<tr > comes to mind a good example). But if you have to pass a validator somewhere I understand.
Could you use a javascript onclick handler for the div, and eliminate the anchor entirely?
Firstly, there is certainly nothing wrong with giving an anchor display:block; I'd say it's one of the more common things people do with CSS and is perfectly standards compliant. Secondly, there are a number of ways to achieve a double border on an HTML element. For one thing, check out the "outline" property:
http://webdesign.about.com/od/advancedcss/a/outline_style.htm
Admittedly, this will only work in the more modern browsers but should degrade gracefully as the outline doesn't take up any space in the page. If the contents of the link is to be an image you can simply give the <a> a little padding and a background colour as well as a normal border (in another colour) to create the impression of a double border. Or give the image a border of its own. Of course you can also do something along the lines of your original idea, though nesting your HTML the other way around, and simply assigning a different border to each element. Or you can use an inline element inside the link (like a <span> or an <em> or something) which you also set to display:block; (yes, this is also valid!). Happy coding!
If I understand correctly your intentions, you should place, as already mentioned, the div outside the anchor, and, to get the same presentation, make the anchor width:100%;height:100%. Cross Browser milage may vary.
Also, you could dump the div altogether and give the anchor display:block;
What are you exactly trying to do?