Change css by name / url (No ID or class)

Question

Change css by name / url (No ID or class)

Navigation

#1 by (3 votes)

-1

I would like to know a script that when viewing link and name in the html page changes the style ...

I need to get a script that gives me some links and names of comments or just one of 2, I would need a place in this script for me to put my custom css for each link / name, and if you can customize it is even better , for me to put a 20 with the same css together and the other separated

or

A script that places an ID for names

Detailing: It is for blog comments, I wanted to differentiate ADM, Members and visitors, so before creating the styles I would need to be able to make it possible

Below is the default of how current links (for outsiders): all comments have the same class="fn" if changing changes for all, just as if trying to put an id on the link help me ...

<cite class="fn">
<a href="LINK" rel="nofollow" target="_blank" title="Gabriel Miller">Gabriel Miller</a>
</cite>

javascript html css

asked by anonymous 13.06.2017 / 17:20

1 answer

How to print the first 12 terms of the Fibonacci sequence inverse in Pascal? Get specific item from a fetchAll in PHP

score 3 · Accepted Answer

Come on, from what I understand you need to first create the classes that will give life to everything, with the created classes now you need to check through the link and add to each 'post' your respective class, I will take into consideration that the link there is a word with the post.

jQuery(document).ready(function(){
  $( "a" ).each(function() {
    switch($(this).attr('href')){
      case 'administrador':
        $( this ).parent().parent().addClass( "adm" );
      break;
      case 'moderador':
        $( this ).parent().parent().addClass( "mod" );
      break;
      case 'membro':
        $( this ).parent().parent().addClass( "memb" );
      break;
      
    }
    
  });
});

.container{
  float:left;
  width: 100%;
  height: 50px;
  background: #CCC;
  margin-bottom: 10px;
}

.adm{
  border: 3px solid red;
}

.mod{
  border: 3px solid gold;
}

.memb{
  border: 3px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="container">
  <cite class="fn">
    <a href="moderador" rel="nofollow" target="_blank" title="Gabriel Miller">Gabriel Miller</a>
  </cite>
</div>
<div class="container">
  <cite class="fn">
      <a href="administrador" rel="nofollow" target="_blank" title="Gabriel Miller">Gabriel Miller</a>
  </cite>
</div>
<div class="container">
  <cite class="fn">
      <a href="membro" rel="nofollow" target="_blank" title="Gabriel Miller">Gabriel Miller</a>
  </cite>
</div>

If I made a mistake or did not clarify correctly, you can comment below.