Welcome to WebmasterWorld Guest from 54.161.64.174

Forum Moderators: not2easy

Message Too Old, No Replies

Selector Question

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

5+ Year Member



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)

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



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)

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



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)

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



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)

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



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

Featured Threads

Hot Threads This Week

Hot Threads This Month