www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 16

Thread: Selector apply to div but not p , why?

  1. #1
    Join Date
    Mar 2012
    Posts
    10

    Angry Selector apply to div but not p , why?

    I am beginner in HTML/CSS ,i have this simple html page :
    HTML Code:
    <!DOCTYPE html>
    <html>
    </head>
    	<link rel="stylesheet" href="stylesheet.css">
    	<title>any title</title>
    </head>
    <body>
    	<p class="myclass">
    		main paragraph text
    
    		<h1> h1 inside p with my class</h1>
    	</p>
    </body>
    and have this simple CSS file :

    HTML Code:
    .myclass {
    	font-size: 20px;
    }
    
    .myclass  h1{
    	color: red;
    }
    i expect the selector .myclass h1 to apply to the h1 element because it is a <h1> wrapped in an element with myclass class applied.according to the book that i am reading it should apply. but it does not ,the text appear black.
    i tried replacing the <p> with a <div> and it works. why ?

  2. #2
    Join Date
    Jun 2014
    Posts
    3
    Here html code:

    HTML Code:
    <!DOCTYPE html>
    <html>
    </head>
    	<link rel="stylesheet" href="stylesheet.css">
    	<title>any title</title>
    </head>
    <body>
    	<p class="myclass">
    		main paragraph text
    
    		<h1 id="myclassp"> h1 inside p with my class</h1>
    	</p>
    </body>
    Here css code:

    HTML Code:
    .myclass {
    	font-size: 20px;
    }
    
    .myclass  h1{
    	color: red;
    }
    
    #myclassh1 { color: red; }
    Tell me if it worked

  3. #3
    Join Date
    Jun 2014
    Posts
    3
    I had write a wrong element

    Here the corected HTML:

    HTML Code:
    <!DOCTYPE html>
    <html>
    </head>
    	<link rel="stylesheet" href="style.css">
    	<title>any title</title>
    </head>
    <body>
    	<p class="myclass">
    		main paragraph text
    
    		<h1 id="myclassh1"> h1 inside p with my class</h1>
    	</p>
    </body>

  4. #4
    Join Date
    Oct 2013
    Posts
    598
    A heading (<h1>, <h2>, etc.) cannot exist inside a <p>aragraph. In HTML 5 you are not required to close the <p> tag; it is assumed to "close" with the beginning of the next block level element, in this case the <h1>. Therefore, the class you want to apply to the <h1> is being ignored.

    A <div> on the other hand must be closed and is assumed to enclose all elements between the opening and closing tags. So all the CSS classes will apply to those elements in that <div> which is why your code works when you replace the <p> with a <div>.

    Also, you have 2 </head> tags. The first one should be <head>.

  5. #5
    Join Date
    Mar 2012
    Posts
    10
    Quote Originally Posted by Kevin2 View Post
    A heading (<h1>, <h2>, etc.) cannot exist inside a <p>aragraph. In HTML 5 you are not required to close the <p> tag; it is assumed to "close" with the beginning of the next block level element, in this case the <h1>. Therefore, the class you want to apply to the <h1> is being ignored.

    A <div> on the other hand must be closed and is assumed to enclose all elements between the opening and closing tags. So all the CSS classes will apply to those elements in that <div> which is why your code works when you replace the <p> with a <div>.
    OK. thanks for the insigt . the next question is where i can find :
    1- a lists of HTML elements that close automatically with the next block element.
    2- a lists of HTML elements that does not close automatically with the next block element.
    is there any elements that close automatically with inline elements but not bloack elemets ( if such thing exist).

    basically i really need a summary of all those roles.

    Quote Originally Posted by Kevin2 View Post
    Also, you have 2 </head> tags. The first one should be <head>.
    yup thanks that was a typo.

  6. #6
    Join Date
    Mar 2012
    Posts
    10
    Quote Originally Posted by ValentinePHP View Post
    I had write a wrong element

    Here the corected HTML:

    HTML Code:
    <!DOCTYPE html>
    <html>
    </head>
    	<link rel="stylesheet" href="style.css">
    	<title>any title</title>
    </head>
    <body>
    	<p class="myclass">
    		main paragraph text
    
    		<h1 id="myclassh1"> h1 inside p with my class</h1>
    	</p>
    </body>
    its nice of you to respond to the question . your response kindly provided a code but did not tell why

  7. #7
    Join Date
    Oct 2013
    Posts
    598
    Quote Originally Posted by jeorge_kabbi View Post
    where i can find :
    1- a lists of HTML elements that close automatically with the next block element.
    2- a lists of HTML elements that does not close automatically with the next block element.
    is there any elements that close automatically with inline elements but not bloack elemets ( if such thing exist).
    A couple of references:
    http://www.webreference.com/html/rendering/index.html
    http://blog.teamtreehouse.com/to-clo...-tags-in-html5

    Personal opinion: Always close block level tags. It's just good practice. <img>, <br>, <meta> etc. don't need to be self-closed (e.g. <br/>). Secondly, never choose a tag based on its default (or styled for that matter) rendering. Choose it based on semantics and document structure. <hx> are heading tags -- meant for hierarchical document structure, not for their size or font weight.

  8. #8
    Join Date
    Jun 2014
    Posts
    9
    I also apply it but it is not working.

  9. #9
    Might also help if you used markup that structurally made sense, since a H1 has no business inside a paragraph in the first place?

    Of course, from a logical document structure point of view, having text before you even HAVE the top level heading under which all content on the page is supposed to be a subsection -- doesn't make a whole lot of sense either.

    But then seeing the way some people are writing markup these days... It's like there's a new wave of "go ahead and use the tags any-old-way".

    Here's a tip, numbered headings are HEADINGS, the "start of a subsection of the page" (which is why HTML 5's HEADER, SECTION and NAV tags are pointless code bloat). An H1 should be the heading under which the entire page is subsections, which is why generally speaking it should be the FIRST content element (aka something with text in it) on the page. H2 are the start of subsections of the H1's, H3's are the start of subsections of the H2, and so forth... which is why you don't just use headings any old way.

    Really, something if you are just starting out you should learn is the HTML STRICT rules of what tags can go inside what. While the steaming train-wreck of halfwit nonsense known as HTML 5 is trying (and failing miserably) to throw it out the window, you want reliable browser behavior it's the first step.

    This reference:
    http://htmlhelp.com/reference/html40/

    Is older, but extremely well laid out. I'd suggest that you read about all the tags there so you have a grasp on what they actually mean, how to use them properly, and what they can and cannot contain, as well as what they can and cannot go inside of. The "contents" and "contained in" sections for each tag is one of the first things anyone writing HTML should learn, that is sadly not really taught anywhere.

    See this sub-page for P, where it says "contains: inline elements". That means block level elements -- DIV, H1, H2, etc -- do not go inside a P.

    http://htmlhelp.com/reference/html40/block/p.html

    TECHNICALLY CSS shouldn't care about those rules, and what you were doing should have been applied, but really if you don't follow the structural rules of the language, don't plan on your page working right.

    ... and HTML 5's "Let's pitch having logical document structure in the trash" is NOT the answer either. Learn what elements are inline-level, what elements are block-level, and learn what can and cannot go inside each tag under the HTML 4 STRICT rules; you use that, you're golden even in the new coding disaster known as HTML 5.

    Which is why a number of people in the industry are saying that if you're forced to use the halfwit garbage known as 5, code it in 4 Strict or XHTML 1.0 Strict, and slap the 4 doctype on at the last minute as anyone who says "you must use 5" probably doesn't know enough about HTML to know the difference.
    Last edited by deathshadow; 06-24-2014 at 05:05 PM.

  10. #10
    Join Date
    Mar 2012
    Posts
    10
    Quote Originally Posted by deathshadow View Post
    Which is why a number of people in the industry are saying that if you're forced to use the halfwit garbage known as 5, code it in 4 Strict or XHTML 1.0 Strict, and slap the 4 doctype on at the last minute as anyone who says "you must use 5" probably doesn't know enough about HTML to know the difference.
    the book that i am reading right now says the same thing about HTML5 , very very sad.
    thank you very much for the info. very informative.

  11. #11
    Oops, should say "slap the 5 doctype on it last minute" (past edit limit)

    Quote Originally Posted by jeorge_kabbi View Post
    the book that i am reading right now says the same thing about HTML5 , very very sad.
    It stems from HTML 5's origins and how... toothless the W3C is overall.

    HTML 5 as we know it did NOT originate inside the W3C -- some people who didn't quite grasp how to use HTML in the first place formed the "Web Hypertext Application Technology Working Group" -- whatWG, which by admission of some of it's former founders set about not making an authoritative specification, but instead documenting "how people were doing things" and making a specification that matched.

    Which sounds all nice and rosy, but at the time (late 2003, early 2004) "how people were doing things" involved (much like today) sleazing out HTML 3.2, the proprietary crap that came into existence between 3.2 and 4, and slapping 4 tranny on it -- in other words the worst of 1997 coding practices... which is why to those of us who embraced HTML 4 Strict, grasp semantic markup, understand logical document structure and practice separation of presentation from content, HTML 5 looks like exactly that, the worst of 1997 coding practices. It undoes all the progress of STRICT because it seems it's creators never grasped the point of it.

    The "documentative instead of authoritative" philosophy continues to this day with HTML 5. The "specification" (and I say that in the loosest sense of the word") is more interested in documenting things browser makers come up with we don't need, than in telling people how to build websites in a sane and rational manner. I think this stems from the fact that there's this noodle-doodle nonsense being parroted industry-wide that "rules make things harder" - SINCE WHEN?!? Clear well defined rules -- for structure, for a site building process, for what tags actually mean -- makes life EASIER as a good specification ends up being a "how to" guide to success.

    Really all the 'structural' parts of HTML 5 -- SECTION, ARTICLE, NAV, FOOTER, ASIDE reek of being made by people who don't grasp the point of logical document structure, or how to use numbered headings and horizontal rules properly. The BEST you can say about them is they make data scrapers lives easier; but isn't data scraper just a polite term for "content thief"? No offense, but how often do you find people asking how to STOP people from stealing content? Sure, let's add tags to make stealing content EASIER.

    The rest of HTML 5 gets even worse... in 4 STRICT a number of tags were dumped or rejected in favor of OBJECT to remove redundancies and prevent vendor lock-in. Technically OBJECT was supposed to replace APPLET and IMG (yes, IMG), and is why EMBED, BGSOUND, and a host of other proprietary tags and attributes were rejected for acceptance. Along comes the idiotic bull known as HTML 5, and not only is EMBED magically now acceptable -- they introduce two new redundant tags DESIGNED for vendor lock-in in the form of AUDIO and VIDEO. Instead of letting the market decide what to use for codecs and containers, browser makers get to cherry pick their favorite pet codecs and shove them down our throats, laughably igniting a new media format war akin to the late '90's QT vs. WMV vs. Realplayer idiocy... You'd almost think the companies that threw their weight behind the WHATWG lost those wars to someone who wasn't even considered to be in the race at the time.

    Then of course there are the tags that shouldn't even be in a markup specification since they are scripting only elements. PROGRESS and CANVAS. The former I see no reason to even exist, the latter though I like... as something JS should be able to do; but I see no reason for it to have a TAG... why? Because it's a scripting only elements, and things that only work when JS is present have no business in 'modern' HTML. Hence why I also consider the ONEVENT attributes to be something that needs to go, alongside absolute danger-zone garbage like letting JS be run in a URL (see javascript:void() or worse). Scripting off content? Isn't that NOSCRIPT's job?

    If you take the time to understand 4 STRICT and how to use semantic markup, and the entire reason things were done the way they were in STRICT, pick up good and sensible document writing and coding practices, you will very quickly find that HTML 5 offers little if anything of value as a markup specification... There's MANIFEST for applications and... and... uhm... Well, there's MANIFEST.

    Though really sadly, HTML 5 has become a sick buzzword thanks to people calling all the really cool stuff HTML 5, when it isn't. CSS3, the new scripting stuff, all of it has not one blasted thing to do with being a markup specification, no matter how many people slap all the actually useful stuff under HTML 5's name.

    Most likely this has been done since if you remove the actual useful stuff that has NOTHING to do with writing markup, the Emperor is standing there bare for the world to see.

    Really HTML 5 reminds me of that tale. The vast majority of people praising it either don't know enough about what a markup specification is to open their mouths on the subject, or are simply afraid to say "Hey, you know you're flashing your willy at everyone, right?"

    -- edit -- Oh, BTW -- what book? Be nice to find SOMEONE in print being realistic about things.

  12. #12
    Join Date
    Mar 2012
    Posts
    10

    Talking

    Quote Originally Posted by deathshadow View Post
    -- edit -- Oh, BTW -- what book? Be nice to find SOMEONE in print being realistic about things.
    HTML5: The Missing Manual http://www.amazon.com/HTML5-Missing-...=9781449363260

  13. #13
    Join Date
    Jul 2014
    Posts
    9
    whenever you use class on tags such as <p> or <img> in css you always start with p.classname {} or another example img.classname and same for other tags, I hope I helped.

  14. #14
    Join Date
    Jul 2014
    Posts
    9
    Code:
    p.myclass {
    	font-size: 20px;
    }
    
    h1.myclass  h1{
    	color: red;
    }
    This will target <p> and <h1> tags so they can be customized.

  15. #15
    Join Date
    Mar 2012
    Posts
    1,814
    Quote Originally Posted by Vregor View Post
    Code:
    p.myclass {
    	font-size: 20px;
    }
    
    h1.myclass  h1{
    	color: red;
    }
    This will target <p> and <h1> tags so they can be customized.
    Why do you need a class for <h1>? There should only be one <h1> per page (despite what HTML5 may say).

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles