Welcome to WebmasterWorld Guest from 54.145.13.215

Forum Moderators: not2easy

Message Too Old, No Replies

Selector Question

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

New User

5+ Year Member

joined:Mar 22, 2007
posts: 14
votes: 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)

Senior Member

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:July 3, 2006
posts: 3123
votes: 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)

Senior Member

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Nov 28, 2004
posts:7999
votes: 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)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month

joined:Apr 9, 2011
posts:12714
votes: 244


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;}
5:40 pm on Feb 29, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Nov 28, 2004
posts:7999
votes: 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. :-)