I have a doubt I do not take a CSS class

Navigation
3

I was created a css style for my project works all right the issue is that I do not take a class in CSS to put the font bigger and bold.

the problem is in .metric .title span 

.metric {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 20px;
margin-bottom: 30px;
border: 1px solid #DCE6EB;
}
.metric .icon {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
float: left;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
}
.metric .icon.success i {
    font-size: 25px;
    color: #4CAF50;
}
.metric .icon.gray i {
    font-size: 25px;
    color:#9E9E9E;
}
.metric .icon.danger i {
    font-size: 25px;
    color: #E42729;
}
.metric .icon .warning i {
    font-size: 25px;
    color: #ffa000 ;
}

.metric p {
    margin-bottom: 0;
    line-height: 1.2;
    text-align: right;
}
.metric .title span {
color: #6f6f6fe8;
font-weight: bold;
font-size: 15px;
}
.metric .number {
    display: block;
    font-size: 28px;
    font-weight: 300;
}
.metric .title {
    font-size: 16px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
    <div class="col-md-4">

        <div class="metric">
        <span class="icon success"><i class="icon-check-square"></i></span>
        <p>
        <span class="number">1</span>
        <span class="title">CONCRETADAS</span>
        </p>
        </div>
        
        </div>

        <div class="col-md-4">

            <div class="metric">
            <span class="icon gray"><i class="icon-clock"></i></span>
            <p>
            <span class="number">1</span>
            <span class="title">EN PROCESO</span>
            </p>
            </div>
            
            </div>

            <div class="col-md-4">

                <div class="metric">
                <span class="icon danger"><i class="icon-x-square"></i></span>
                <p>
                <span class="number">1</span>
                <span class="title">RECHAZADAS</span>
                </p>
                </div>
                
                </div>
  
</div>
    
asked by user113262 05.01.2019 в 15:29
source

3 answers

3

You can reach span with class title by doing this simply: 

span.title {
    color: #6f6f6fe8;
    font-weight: bold;
    font-size: 15px;
}

Let's see if it works: 

.metric {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 20px;
margin-bottom: 30px;
border: 1px solid #DCE6EB;
}
.metric .icon {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
float: left;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
}
.metric .icon.success i {
    font-size: 25px;
    color: #4CAF50;
}
.metric .icon.gray i {
    font-size: 25px;
    color:#9E9E9E;
}
.metric .icon.danger i {
    font-size: 25px;
    color: #E42729;
}
.metric .icon .warning i {
    font-size: 25px;
    color: #ffa000 ;
}

.metric p {
    margin-bottom: 0;
    line-height: 1.2;
    text-align: right;
}
span.title  {
    color: #6f6f6fe8;
    font-weight: bold;
    font-size: 15px;
}

.metric .number {
    display: block;
    font-size: 28px;
    font-weight: 300;
}
.metric .title {
    font-size: 16px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
    <div class="col-md-4">

        <div class="metric">
        <span class="icon success"><i class="icon-check-square"></i></span>
        <p>
        <span class="number">1</span>
        <span class="title">CONCRETADAS</span>
        </p>
        </div>
        
        </div>

        <div class="col-md-4">

            <div class="metric">
            <span class="icon gray"><i class="icon-clock"></i></span>
            <p>
            <span class="number">1</span>
            <span class="title">EN PROCESO</span>
            </p>
            </div>
            
            </div>

            <div class="col-md-4">

                <div class="metric">
                <span class="icon danger"><i class="icon-x-square"></i></span>
                <p>
                <span class="number">1</span>
                <span class="title">RECHAZADAS</span>
                </p>
                </div>
                
                </div>
  
</div>

In your case, this would also work: 

.metric span.title  {
    /*código*/
}

NOTE:

You must be attentive to the logic that you follow in the styles. For example, to the size of the font you assign font-size: 15px; when you treat the span and then change that value here: 

.metric .title {
    font-size: 16px;
}
    
answered by 05.01.2019 / 15:44
source
1

You had the class, poorly defined, here you have it done 

.metric .title {
color: #6f6f6fe8;
font-weight: bold;
font-size: 15px;
}
    
answered by 05.01.2019 в 15:44
1

Regards. The reason why you do not reach span is the following: 

/* Aquí se asume que «span» se encuentra dentro del elemento 
   que contenga la clase «.title» */
.metric .title span {
  color: #6f6f6fe8;
  font-weight: bold;
  font-size: 15px;
}

But you have the structure HTML like this: 

<div class="metric">
  <span class="icon gray"><i class="icon-clock"></i></span>
    <p>
      <span class="number">1</span>
      <span class="title">EN PROCESO</span>
   </p>
</div>

In this case, you would reach it like this: 

.metric .title {
  color: #6f6f6fe8; 
  font-weight: bold;
  font-size: 15px;
}

But for support effect in most browsers It could be used like this: rgba (111, 111, 111, 0.91) 

.metric .title {
  /* Cambiar */
  color: #6f6f6fe8;

 /* Por */
  color: rgba(111, 111, 111, 0.91);

  font-weight: bold;
  font-size: 15px;
}

We are solving the example now: 

@import url("https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css");

.metric {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  padding: 20px;
  margin-bottom: 30px;
  border: 1px solid #DCE6EB;
}
.metric .icon {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  float: left;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}
.metric .icon.success i {
  font-size: 25px;
  color: #4CAF50;
}
.metric .icon.gray i {
  font-size: 25px;
  color:#9E9E9E;
}
.metric .icon.danger i {
  font-size: 25px;
  color: #E42729;
}
.metric .icon .warning i {
  font-size: 25px;
  color: #ffa000 ;
}

.metric p {
  margin-bottom: 0;
  line-height: 1.2;
  text-align: right;
}

/* Cambia */
.metric .title span {
  color: #6f6f6fe8;
  font-weight: bold;
  font-size: 15px;
}

/* Por */
.metric .title {
  color: rgba(111, 111, 111, 0.91); /* Es el mismo color y canal alfa que #6f6f6fe8 */
  font-weight: bold;
  font-size: 15px;
}
.metric .number {
  display: block;
  font-size: 28px;
  font-weight: 300;
}
.metric .title {
  font-size: 16px;
}
<div class="row">
	<div class="col-md-4">
		
		<div class="metric">
			<span class="icon success"><i class="icon-check-square"></i></span>
			<p>
				<span class="number">1</span>
				<span class="title">CONCRETADAS</span>
			</p>
		</div>
		
	</div>
	
	<div class="col-md-4">
		
		<div class="metric">
			<span class="icon gray"><i class="icon-clock"></i></span>
			<p>
				<span class="number">1</span>
				<span class="title">EN PROCESO</span>
			</p>
		</div>
		
	</div>
	
	<div class="col-md-4">
		
		<div class="metric">
			<span class="icon danger"><i class="icon-x-square"></i></span>
			<p>
				<span class="number">1</span>
				<span class="title">RECHAZADAS</span>
			</p>
		</div>
		
	</div>
</div>
    
answered by 05.01.2019 в 16:30
Subtract hours from two columns datetime sql server Connect Android via usb. adb devices various errors (xxxxxxxxxx no permissions) OS UNIX type