Sign in to follow this  
gnojham

General CSS stuff

Recommended Posts

i think this is the right forum, but if not, somebody can move to the design section i guess.

so, im making an actual effort to really learn HTML and CSS

lets say i have some HTML:

<div id="banner">
    <div class="content">
      <h1>Conservation Efforts at Lake Tahoe Being Praised by Nation's Leaders</h1>

to select that h1 in CSS, this is correct i believe, right?

#banner .content h1 {
  border: solid 3px white;
}

ok, but what if the html looked like this:

<div id="banner" class="content">
  <h1>Conservation Efforts at Lake Tahoe Being Praised by Nation's Leaders</h1>

 

i found that using the same CSS wont work, and i have to remove the space between #banner and .content so its 

#banner.content h1

this is because of them being in the same tag in the latter case, yes? 

is there any more in depth info about this or is it just that simple? hmm, now that i typed it all out and thought about it, i guess its just that the first example is nested html tags, so the css selectors are separated by spaces, and the second example #banner and .content are not nested so i chain them together in the css while the h1 still remains nested so it gets the space between.

i dont know what im looking for really as far as info, just opening a discussion i guess and see if it triggers more questions on my part (and to generate more ambition i suppose), feel free to comment or discuss. 

thanks

 

 

 

Share this post


Link to post
Share on other sites

When you use a space between the ID and Class you're telling the browser to look for an element with that Class that's a Descendant of the element with the ID exactly as shown in your first example. 

In your second example, that space won't work because the element you're selecting isn't a Descendant - it's an element that is also a member of the Class you're targeting. 

Generally speaking (and there are always exceptions), the best practice is to minimize the number of Selectors being used as browsers parse them from right to left; meaning that it takes longer to parse 3 selectors than one or two. Obviously the latency or time it takes to parse them is negligible in terms of today's technology, but that latency does add up on really complex pages being rendered on a slower system. 

That said (and this is strictly my own opinion, based on what I've seen over the past 20 years or so), I think most designers tend to approach CSS with "Brute Force", i.e.; forcing styles as they go, rather than really thinking through the process for a leaner, cleaner design that genuinely reflects what CSS is all about. 

Bear in mind, I came up through the programmings ranks in the 70's and 80's when resources were limited, so I'm a bit of a minimalist when it comes to code, whether it's a script, CSS or anything else. 

Share this post


Link to post
Share on other sites

so in the first example:

<div id="banner">
    <div class="content">
      <h1>Conservation Efforts at Lake Tahoe Being Praised by Nation's Leaders</h1>

if i was only interested in styling the h1, i could just go like this:

#banner h1 {
  border: solid 3px white;
}

or this:

.content h1 {
  border: solid 3px white;
}

or is it mandatory that you select all 3 (id, class, and tag)?

if so would this be a dumb idea for any reason other than the potential issues of having other h1’s in the same class elsewhere in the html

Share this post


Link to post
Share on other sites
3 minutes ago, gnojham said:

if so would this be a dumb idea for any reason other than the potential issues of having other h1’s in the same class elsewhere in the html

when you said minimize the selectors, i thought you meant to be more efficient with the code, but maybe you meant what i just asked above. if so, then i already have the answer 8-)

Share this post


Link to post
Share on other sites

You don't need to select all 3 unless you're targeting something very specific (depends on what else is in your design). 

So ask yourself this - is this the only h1 in the design or are there others? If others, will they all have a white border? If the answer is no, then:

h1 {
  border: solid 3px white;
}

If the answer was yes, then I would do something like this instead:

.white_border {
  border: solid 3px white;
}

<h1 class="white_border">Title</h1>

Again, it depends on your overall design - I prefer working with the lowest, common denominator, because I often find that creating classes like this one can be used elsewhere in the design. 

Ask me about resetting and normalization next, LOL...

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.