Creating variables for CSS Pseudo-classes

[Texan78]

Hello, is it possible to created a variable for a pseudo class?

 

For example I normally do something like this. 

$tableWrapper = "background-color:{$alertColor};font-size:12px; padding: 0px 5px 5px 5px;text-align:center;";

Then when I use it in my HTML I would call the variable like so. 

$tData .= "<div style='{$tableWrapper}'>\n";

But for something like this 

$ul.alertLegend li

Wouldn't work because of the period. Is this possible to do? I really need to be able to do this since the color that will be included in the class is being pulled from an array depending on a certain value. So is it possible to created a variable for for pseudo class?

 

-Thanks

[Ch0cu3r]

 

Wouldn't work because of the period.

Why is that? Maybe wrap $ul in curly braces?

 

Are generating css dynamically? Maybe you should look at SASS.

[Texan78]

Why is that? Maybe wrap $ul in curly braces?

 

Are generating css dynamically? Maybe you should look at SASS.

 

Usually when you create a variable for a class the variable is your class name. 

 

I.E. $var = "your styles here";

 

echo "<div class='$var'>YADA</div>

 

In this case you can't use ul.alertLegend li as the name of the variable because its a pseudo class

 

So how do I create a variable with a pseudo class? 

[Texan78]

Never mind, I came up with and alternative way. 

[hansford]

ul.alertLegend li 

Is an example of a class selector. An Unordered List with a class of "alertLegend" 

Semantics I know, but some might be viewing and looking things up by what we call them.

 

pseudo classes have the double colon.

a:link
a:hover
p:first-child
p:first-line

[hansford]

Good question Texan. I didn't know the answer, but went digging. Found an old post on stackoverflow answered by a senior member who states it is not possible using in-line styles. http://stackoverflow.com/questions/5293280/css-pseudo-classes-with-inline-styles

[Texan78]

Sorry, hansford for the mis-interpretation, you are correct I meant class selector, not pseudo class. That is what lack of sleep and and previously working with some pseudo classes does. HA! 

 

I was actually making it harder than it was. What I ended up doing was this and just breaking it down. 

// Lets create some styles for the list
    $ulStyle   = "display:inline;padding:15px;";
    $liStyle   = "display:inline;";
    $spanStyle = "background-color:{$alertColor};border:solid 1px #333;width:15px;height:10px;display:inline-block;'> </span><span style='font-size:12px;color:#555;";

//Let's create the list
     $legend .= "<ul style='{$ulStyle}'>";
     $legend .= "<li style='{$liStyle}'><span style='{$spanStyle}'> {$event}</span></li>";
     $legend .= "</ul>";

Now my next issue is do I even want to use an unordered list and if so how I can limit it to only 5 before it breaks to a new line or if I want to use a table and use columns instead. I also still need to figure out a way to filter out duplicates. 

 

You can see what I mean from the link. http://www.mesquiteweather.net/inc/inc-legend.php

[hansford]

Personally, since this is data related, and that's what tables are for, I would use a table.

You want everything to be flush and presentable. Tables are not "bad" like everyone is lead to believe with CSS. Otherwise, they would have dropped them from the specs. Use what available resources you have is my "opinion". As far as the dups go - store the events in an array and then compare them as a string to see if they match.

Edited December 17, 2014 by hansford

[Texan78]

I completely agree. If tables are used properly which in this case to display data then they are completely fine to use. Which is why I debated on using tables instead but, wasn't sure how to roll over to a new row after X amount of columns. 

 

I have done something similar before with an array which I am still trying to master which would help me with what I am trying to do now. Only issue is it doesn't restrict to just one entry. It will show all of that entry if it exists more than once in the data. 

 

Here is the example. http://www.mesquiteweather.net/inc-weather_radio_alert.php

 $alertValue = array('Tornado Warning', 'Severe Thunderstorm Warning', 'Tornado Watch', 'Severe Thunderstorm Watch', 'Flash Flood Warning', 'Flash Flood Watch', 'Flood Warning', 'Flood Watch', 'Flood Advisory', 'Winter Storm Warning', 'Winter Storm Watch', 'Winter Weather Advisory', 'Special Weather Statement');


        $events = array_intersect($alertValue, $event);


        $message = array_shift($events);




// Set the alert colors for the banner background


include ('inc-NWR-alert-colors.php');


// Lets assign some styles for the banner


         $bannerStyle = '"color: #333; width:100%; border-top-style:solid; border-bottom-style:solid; border-color:#FFF; border-width:1px; font-size:11px; font-weight:normal; font-family: Arial,Helvetica,sans-serif; text-align: center; background-color:' .$alertColor. '; margin-bottom:5px; padding: .2em 0em .2em 0em"';


// Lets assembly the banner to display


         $radiowarning = '<div style='.$bannerStyle.'>
                 <strong>WEATHER BROADCAST ALERT - '.$message.'</strong>... Listen now to our LIVE NOAA Weather Radio Stream <a href="'.$feed.'" onclick="return popup(this, \'noaa\')" title="Live NOAA Radio For Dallas County"><span style="color:FFF">[Click here to listen]</span></a>
                 </div>';


foreach( $alertValue as $alert )
{
if (in_array($alert, $event))
{
             echo $radiowarning;
}
}

[hansford]

I don't know what the event arguments look like, but try this:

$alertValue = array('Tornado Warning', 'Tornado Watch', 'Severe Thunderstorm Warning', 'Severe Thunderstorm Watch', 'Flash Flood Warning', 'Flash Flood Watch', 'Flood Warning', 'Flood Watch', 'Flood Advisory', 'Winter Storm Warning', 'Winter Storm Watch', 'Winter Weather Advisory', 'Special Weather Statement');

$event = array('Tornado Warning', 'Tornado Watch', 'Severe Thunderstorm Warning', 'Severe Thunderstorm Watch', 'Flash Flood Warning', 'Flash Flood Watch', 'Flood Warning', 'Flood Watch', 'Flood Advisory', 'Winter Storm Warning', 'Winter Storm Watch', 'Winter Weather Advisory', 'Special Weather Statement');

$events = array_intersect($alertValue, $event);

$alertValue = array_keys(array_flip($events));



foreach( $alertValue as $alert )
{
    echo $alert . '<br />';
}