Why does CSS work with fake elements?

css selectors
pseudo elements in css
css pseudo class
before css
css :after not working
what is best way to overcome the default settings that comes with css?
pseudo elements vs pseudo classes
which feature enables easy identification of corresponding style element?

In my class, I was playing around and found out that CSS works with made-up elements.

Example:

imsocool {
    color:blue;
}
<imsocool>HELLO</imsocool>

Why does CSS work with fake elements?, why do we not use made-up elements like these since they work effectively.but, even more important question here is : how and why does css work with fake� Why does CSS work with fake elements? (Most) browsers are designed to be (to some degree) forward compatible with future additions to HTML. Unrecognised elements are parsed into the DOM, but have no semantics or specialised default rendering associated with them.

Pseudo-elements, Semantic HTML (where the elements are used for their correct purpose) is You could do this manually by just removing the CSS from your code, but the Take for example our fake-div-buttons.html example (see source code). Note: This technique will only work if you set your original event handlers� Why does CSS work with fake elements? (Most) browsers are designed to be (to some degree) forward compatible with future additions to HTML. Unrecognised elements are parsed into the DOM, but have no semantics or specialised default rendering associated with them.

YADA (yet another (different) answer)

Edit: Please see the comment from BoltClock below regarding type vs tag vs element. I usually don't worry about semantics but his comment is very appropriate and informative.

Although there are already a bunch of good replies, you indicated that your professor prompted you to post this question so it appears you are (formally) in school. I thought I would expound a little bit more in depth about not only CSS but also the mechanics of web browsers. According to Wikipedia, "CSS is a style sheet language used for describing ... a document written in a markup language." (I added the emphasis on "a") Notice that it doesn't say "written in HTML" much less a specific version of HTML. CSS can be used on HTML, XHTML, XML, SGML, XAML, etc. Of course, you need something that will render each of these document types that will also apply styling. By definition, CSS does not know / understand / care about specific markup language tags. So, the tags may be "invalid" as far as HTML is concerned, but there is no concept of a "valid" tag/element/type in CSS.

Modern visual browsers are not monolithic programs. They are an amalgam of different "engines" that have specific jobs to do. At a bare minimum I can think of 3 engines, the rendering engine, the CSS engine, and the javascript engine/VM. Not sure if the parser is part of the rendering engine (or vice versa) or if it is a separate engine, but you get the idea.

Whether or not a visual browser (others have already addressed the fact that screen readers might have other challenges dealing with invalid tags) applies the formatting depends on whether the parser leaves the "invalid" tag in the document and then whether the rendering engine applies styles to that tag. Since it would make it more difficult to develop/maintain, CSS engines are not written to understand that "This is an HTML document so here are the list of valid tags / elements / types." CSS engines simply find tags / elements / types and then tell the rendering engine, "Here are the styles you should apply." Whether or not the rendering engine decides to actually apply the styles is up it.

Here is an easy way to think of the basic flow from engine to engine: parser -> CSS -> rendering. In reality it is much more convoluted but this is good enough for starters.

This answer is already too long so I will end there.

Handling common accessibility problems, This method utilizes the :after pseudo-element, which doesn't work so well on inputs, but if you want to apply the same effect to form elements you can just create� CSS, or Cascading Style Sheets, is code that controls not only the visual appearance of your individual HTML elements but also where the elements appear in relationship to one another, and sometimes how they interact and animate. Between HTML, CSS, and JavaScript, you code the entire presentation layer of a website. Powering the site to …

Unknown elements are treated as divs by modern browsers. That's why they work. This is part of the oncoming HTML5 standard that introduces a modular structure to which new elements can be added.

In older browsers (I think IE7-) you can apply a Javascript-trick after which they will work as well.

Here is a related question I found when looking for an example.

Here is a question about the Javascript fix. Turns out it is indeed IE7 that doesn't support these elements out of the box.

Also; why didn't he know that made-up tags existed and worked with CSS. Are they uncommon?

Yes, quite. But especially: they don't serve additional purpose. And they are new to html5. In earlier versions of HTML an unknown tag was invalid.

Also, teachers seem to have gaps in their knowledge, sometimes. This might be due to the fact that they need to teach students the basics about a given subject, and it doesn't really pay off to know all ins and outs and be really up to date. I once got detention because a teacher thought I programmed a virus, just because I could make a computer play music using the play command in GWBasic. (True story, and yes, long ago). But whatever the reason, I think the advice not to use custome elements is a sound one.

CSS Pseudo-elements, The CSS Working Group is also developing CSS level 2 revision 2 (CSS 2.2). E > F, Matches any F element that is a child of an element E. Child selectors. E: first-child SPAN> The first line will be identified by a fictional tag sequence. .sidebar { /* The following property does exactly bupkis. Dyslexics Untie! */ bakcground-color: #333; } Bad CSS values can be a bear to hunt down, particularly if you’re convinced that the value you’re using really exists.

Actually you can use custom elements. Here is the W3C spec on this subject:

http://w3c.github.io/webcomponents/spec/custom/

And here is a tutorial explaining how to use them:

http://www.html5rocks.com/en/tutorials/webcomponents/customelements/

As pointed out by @Quentin: this is a draft specification in the early days of development, and that it imposes restrictions on what the element names can be.

Fake See-Through Backgrounds with CSS, Writing great CSS is essential in professional web development. Here are 12 of our favorite It's important to know how shorthand properties work before using them. You can In the specificity hierarchy (ID > Class > Element), IDs trump classes. But in the following, font-size: 14 wins because div.fake is more specific. Why does CSS work with fake elements? 1. HTML/CSS full width issue with scrollbar. 3. Stop position absolute child from taking parent's width. Hot Network Questions A

Selectors, It's pretty amazing what you can do with the pseudo elements :before and :after. For every element on the page, you get two more free ones that� I found a similar topic, to this, but I can't find the specific CSS to change in Wordpress. If you go to my homepage Or blog. I want to change the spacing within and between paragraphs. Not sure which element I need to modify in my CSS. Found a line-height property for .body, but that doesn't seem to do what I want.

12 CSS tips and best practices, CSS has no requirement that you target elements of a specific or even valid specification. This makes CSS forward compatible with future HTML specifications[1]� To be sure the stylesheet file been loaded, right click the chrome and in the menu select "inspect element" option. At the bottom of the browser will appear developer tool window. on the top of this window click the "resources" tab- that will display all the resources of your html file (like stylesheets, images etc) try to search for missing stylesheet, if it exsist in the list- the problem is

A Whole Bunch of Amazing Stuff Pseudo Elements Can Do, A common UI pattern that we see on the web are dropdown menus. They’re used to display related information in pieces, without overwhelming the user with buttons, text, and options. Somewhere that we see these a lot is inside of headers or navigation areas on websites. Let’s see if we can make one of these menus with CSS alone.

Comments
  • HTML is a way of providing meaning to data which can be understood by a wide variety of mediums (including people and browsers). Your made up tags don't add any meaning. That's one of many reasons why he doesn't want you to use them.
  • @MrMisterMan actually I think they do. What's more meaningful - <p>555-212-2344</p> or <supportPhone>555-212-2344</supportPhone>
  • @YuriyGalanter <p class="supportPhone"> ;P
  • @MrMisterMan Just remember, all these rules and programming constructs were made up by people no smarter than you, and you can change it, you can influence it, you can build your own things that other people can use.
  • I might point out that what you are doing is basically XML not HTML. XML is a more abstract markup language which allows you to represent data in the "useful" way you describe - ie. with semantic meaning attached. You can then use an XSLT transformation to render your data in HTML
  • "They are not allowed by the HTML specification" Not necessarily true. They do not conform to the HTML Namespace specification, but the HTML5 spec is a much broader thing that allows for custom specifications, and explicitly states how to handle such things in regards to CSS and API handling (DOM).
  • There are already libraries, most notably Angular.js, that allow you to extend HTML with custom elements. Perhaps not in the sense that you mean as the elements are just parsed by javascript and translated to real ones usually, but if you are looking to extend html with custom tags, you can do it with Angular
  • +1 For "They might conflict with future standards". Remember it might work now but it has to work for 3-4 years after you have started.
  • I like to have a <ninja> tag to hide dom elements instead of applying style display:none eg: <ninja>Some hidden stuff</ninja>
  • Another really important point: Special browsers for blind people or people with otherwise limited ability use the proper HTML elements for different things (ease on-page navigation by following headers, for example). So the missing semantics+default rendering might not affect normal browsers too much, but these special browsers will probably be confused, drastically reducing the usability of your web site.
  • Another argument for valid code is, if you need to hand over to another developer or you're working in a team, the other members or new developer should instantly understand what you're trying to achieve . . . With invalid, made up tags, this can become very difficult...
  • AKA. Future development and easing maintenance.