CSS on 'a' class in SQL call

Question

Is there a different way to reference an 'a class' within an SQL call for separate .css files? I can't get my CSS to style a link(3rd line from bottom in function) Edit: Seems like CSS being overruled error, 2nd picture

CSS;

.toggleFollow {
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}

Function;

  function displayTweets($type) {

    global $link;

    if ($type == 'public'){
      $whereClause = "";
    }

    $query = "SELECT * FROM tweets ".$whereClause." ORDER BY 'datetime' DESC LIMIT 10";

    $result = mysqli_query($link, $query);

    if (mysqli_num_rows($result) == 0) {
      echo "No Tweets";
    } else {
      while ($row = mysqli_fetch_assoc($result)) {

        $userQuery = "SELECT * FROM users WHERE id = ".mysqli_real_escape_string($link, $row['userid'])." LIMIT 1";
        $userQueryResult = mysqli_query($link, $userQuery);
        $user = mysqli_fetch_assoc($userQueryResult);

        echo "<div class='tweet'><p><strong>".$user['email']." </strong><span class='time'> - ".time_since(time() - strtotime($row['datetime']))." ago</span></p>";

        echo "<p>".$row['tweet']."</p>";
        echo "<p><a class='toggleFollow' data-userid='".$row['userid']."'>Follow</a></p></div>";
      }
    }

you need to learn about mysql joins

user6763587
– user6763587

2017-11-29 21:54:59 +00:00
Commented Nov 29, 2017 at 21:54 — user6763587
– user6763587, Commented Nov 29, 2017 at 21:54

Obsidian Age · Accepted Answer · 2017-11-29 22:19:34Z

3

The problem is that you're echoing <a class'toggleFollow'>, which is invalid markup.

In order for the CSS selector .toggleFollow to correctly target it, you need to add the equals sign after class:

<a class='toggleFollow'>

You can validate that you have valid markup with the W3C Validation Service (which supports direct input), which will actually warn you of missed equals signs for attribute values:

Have you forgotten the "equal" sign marking the separation between the attribute and its declared value? Typical syntax is attribute="value".

Assuming this does not resolve the issue, there are only four possible other causes of the problem. Here are the four possible problems, and their respective solutions:

The most likely culprit is that you have cached the old HTML markup. This can be resolved by holding CTRL and pressing F5, which will refresh the DOM. This will add the equals sign to the markup, and also update the link to the CSS file if it has been modified.
It's possible that the CSS itself got cached, before you added the valid .toggleFollow selector. You can refresh the CSS cache (which is separate to the browser cache!) by holding SHIFT while clicking on the refresh icon.
Another culprit could be one of specificity. Ensure that the .toggleFollow selector is not being overridden by a selector with higher specificity. You can check the specificity with the F12 Developer Tools. The lines with strikes through them are being overridden.
Least likely, it's possible that your CSS file isn't actually being referenced incorrectly. Ensure that you're actually loading it correctly by using the F12 Developer Tools to see if you are getting a 404 when attempting to load it.

edited Nov 29, 2017 at 22:19

answered Nov 29, 2017 at 21:52

Obsidian Age

42.6k11 gold badges54 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

oversoon Over a year ago

Thanks for the link. I added the "=" but it didn't solve my problem?

Obsidian Age Over a year ago

^ It's possible that caching is an issue as well. I'll update my answer to cover this as well, bear with me.

oversoon Over a year ago

I tried CTRL f5 on Chrome and tried Firefox too, I updated my question

Obsidian Age Over a year ago

^ That rules out the most likely culprit, though there are three other possible problems. I've updated my answer to cover each, and their respective solutions :)

oversoon Over a year ago

It seems like the css is being out ruled? I updated question ty for everything so far

DesignMonkeyJim · Accepted Answer · 2017-11-29 22:47:59Z

2

class'toggleFollow'

should be

class='toggleFollow'

Update - you need to look at CSS Specificity as @Obsidian mentioned

.tweet a.toggleFollow {
     color: blue;
}

You can also use !important

.tweet a.toggleFollow {
     color: blue!important;
 }

edited Nov 29, 2017 at 22:47

answered Nov 29, 2017 at 21:52

DesignMonkeyJim

1,9451 gold badge14 silver badges23 bronze badges

4 Comments

DesignMonkeyJim Over a year ago

Have you used the developer tools to see if the CSS class is being pulled through? you might need to clear the browser cache. If you are using chrome hold Ctrl and press F5.

oversoon Over a year ago

I tried both. I've updated my question with Chrome screenshot

DesignMonkeyJim Over a year ago

Is the html source outputting the class name?

DesignMonkeyJim Over a year ago

.tweet a.toggleFollow should do the trick, you need to target that specific element

Collectives™ on Stack Overflow

CSS on 'a' class in SQL call

2 Answers 2

5 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related