Which CSS selector to use?_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-02-07 23:40 出处：网络

Sorry for vague title, I am not able to describe my question in one line. question is regarding page titles, which are generated from common backend template, which is

<h2 class='page-title'> {title} </h2>

where {title} is dynamically generated by application. so I will have one on each page of my site generated from that same template.

About page: <h2 class='page-title'>About</h2>
Services page: <h2 class='page-title'>Service</h2>
Home Page: <h2 class='page-title'>Home</h2>

What I want to do is开发者_JS百科, to hide that from 3. Home page, but let it display on all other pages using CSS or Javascript. I stupidly tried h1 {display:none} but that just hides everything, I only want to hide <h2 class='page-title'>Home</h2>

Any idea on how to do that?

Either use backend code to give your home page title a specific id, or use in-page css on the home page itself:

h2.page-title { 
  display:none;
}

You will need to add a style to just the home-page, or have a class that indicates that you're currently viewing the homepage:

h2.page-title is the very specific way of selecting the element, but it will affect all pages.

.page-title could work if you know the class is only going to ever happen on an h2 element.

If you're using a class on the body you could do the following:

body.frontpage h2.page-title

or body.frontpage .page-title depending on how specific you want to be.

I recommend being as generic as possible to avoid specificity issues.

I would give your <html> element an id (unique for each page):

<html id='{pageid}'>
...
<h2 class='page-title'> {title} </h2>
...
</html>

Then use the selector

#home .page-title { display: none }

If you have a CMS or something similiar, dumping content into a single template, then I think you're better off with javascript for this. I don't know of a selector in css for innerText of an element.

I commonly use the jquery library - I would recommend something like:

$(document).ready(function() { 
    $("h2.page-title:contains('Home')").css('display', 'none'); 
}

This is best done by the very same server-side language which is used to dynamically generate this, you simply add a condition that if page is 'Home' nothing is outputted.

If this is not an option for you, I'd suggest Mel's way as it will simply work, and there's no need for javascript.

Also I think Mel's code should be above the h2 you want to hide, and wrapped into <style></style> tags.