homepage Welcome to WebmasterWorld Guest from 54.204.134.183
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
Selector Question
Megalith




msg:4422497
 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>

 

penders




msg:4422569
 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.

rocknbil




msg:4422703
 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. :-)

lucy24




msg:4422864
 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:
<li>blahblahblah
<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;}

rocknbil




msg:4423172
 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.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved