homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Selector Question

 2:43 am on Feb 28, 2012 (gmt 0)

Okay, I feel like a noob asking this, but you have to point selectors toward the direct parents of anything you want to style, correct?

I was trying to add a margin to <p class="dsq-widget-meta">. Initially, I tried p.dsq-widget-meta, but that did nothing. However, ul.dsq-widget-list p worked.

Is there a way to actually target <p class="dsq-widget-meta"> directly?

<div id="container">
<div id="content">
<ul id="sidebar">
<li id="calendar-2" class="widget widget_calendar">
<li id="text-2" class="widget widget_text">
<div class="textwidget">
<div id="popularthreads" class="dsq-widget">
<h2 class="dsq-widget-title">Popular Threads</h2>
<script src="http://what.com/popular_threads_widget.js?num_items=5" type="text/javascript">
<style media="screen" type="text/css">
<ul class="dsq-widget-list">
<li class="dsq-widget-item">
<a class="dsq-widget-thread" href="http://what/2012/02/19/">What</a>
<p class="dsq-widget-meta">5 comments 1 day ago</p>



 9:57 am on Feb 28, 2012 (gmt 0)

You don't need to (always) "point selectors toward the direct parents"... in doing so you are simply increasing the selectors specificity. (See #3 here... Cascading Order [w3.org]) p.dsq-widget-meta could have worked OK, but another style was probably overriding it.

The browser tools in Chrome and Firefox should tell you from where your styles are coming from.


 4:50 pm on Feb 28, 2012 (gmt 0)

Are you using the FireFox extension FireBug? You can right click the element and see what is affecting it, your class selector was probably "working" and something else was overriding it.

If it's "just this instance" - a SINGLE instance on any given page - you can add an ID to it and access it that way, too.

Though a p is valid inside an li, block elements inside lists never made a lot of sense to me. :-)


 10:28 pm on Feb 28, 2012 (gmt 0)

Though a p is valid inside an li, block elements inside lists never made a lot of sense to me.

Depends on what the <p> is doing. I have a lot of this pattern:
<p>subsidiary blahblahblah</p></li>
where the subsidiary stuff is differently formatted-- smaller type, bigger side margins, that kind of thing. It's less bother than shoving in a <ul> just for one paragraph and having to work out the styles and hanging indents all over again. CSS only has to say
li p {font-size: something; margin: something;}


 5:40 pm on Feb 29, 2012 (gmt 0)

Nah it's a personal thing and nothing to do with specifications. A list should be a list. It shouldn't contain a *separate* a self-contained unit dealing with a particular point or idea (paragraph,) it shouldn't start new topics with headings, it should be it's own point in a series of related points - a list. Nesting other elements like this is perfectly valid, it's used all the time, but I won't do it. :-)

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved